Performance
Measure DOM workloads, investigate bottlenecks, and verify improvements against a baseline.
This guide shows how to measure Regor performance with stable, repeatable workflows:
- Browser DOM benchmark (real rendering path)
- Minidom benchmark (engine-only, no paint/layout noise)
- CPU profiling (find real hotspots before changing code)
Measure the interaction that matters before deciding what to optimize.
Regor Wins Where It Matters
In this repo’s benchmark suite, Regor is the update-throughput winner in many real mutation patterns.
Highlights:
- Regor is consistently strong in mutation-heavy scenarios.
- Regor often leads total update cost when interaction drives many list changes.
- Regor can outperform even when mount is not the absolute fastest metric.
In the 1000-row snapshot on this page, Regor wins 10 of 11 scenario medians.
Regor median wins:
swap_second_lastrotate_head_tailsplice_middle_replacemutate_stride_fieldsincrement_odd_values_by_5insert_head_32remove_every_5thshuffle_deterministicreplace_all_objects_same_keystoggle_class_all_rows
Verification paths:
/benchmarks/index.htmlfor mount + mutation totals- Scenario table in the same page for per-pattern winners
Latest Benchmark Snapshot (1000 rows)
Benchmark settings:
- Row count:
1000 - Warmups:
6 - Samples:
20
Mount + Mutate Total
| Framework | Mount Median | Mount P90 | Mutate Median | Mutate P90 | Total Median | Total P90 |
|---|---|---|---|---|---|---|
| Regor | 49.40 ms | 60.20 ms | 217.40 ms | 256.40 ms | 270.60 ms | 312.20 ms |
| Vue@latest | 27.20 ms | 34.70 ms | 325.10 ms | 343.70 ms | 354.10 ms | 371.90 ms |
Scenario Table Snapshot
| Scenario | Regor Median (ms) | Vue Median (ms) |
|---|---|---|
swap_second_last | 5.20 | 16.60 |
reverse_rows | 26.00 | 25.90 |
rotate_head_tail | 10.30 | 14.20 |
splice_middle_replace | 9.90 | 16.60 |
mutate_stride_fields | 8.00 | 16.60 |
increment_odd_values_by_5 | 13.50 | 16.60 |
insert_head_32 | 8.50 | 16.70 |
remove_every_5th | 106.10 | 124.50 |
shuffle_deterministic | 4.20 | 28.60 |
replace_all_objects_same_keys | 8.00 | 30.80 |
toggle_class_all_rows | 14.30 | 14.40 |
Interpretation:
Regor shows strong wins on several real mutation patterns.
Compare the same workload and environment. A benchmark snapshot is a starting point for investigation, not a prediction for every application.
Browser DOM Benchmarks
Use this when you care about user-visible page performance.
- Run:
yarn bench:serve - Open:
/benchmarks/index.htmlfor mount + mutation benchmarks/benchmarks/initial-load.htmlfor mount-only benchmarks
- Use the controls:
- row count dropdown (
500,1000,2000,5000) - warmups
- samples
- row count dropdown (
Interpretation:
Medianis your primary number.P90reflects tail behavior and jitter.- Compare scenario tables, not only one aggregate total.
Minidom Perf Suite (Regression Gate)
Use this for fast local iteration and CI-like guardrails.
Commands:
- Run suite:
yarn perf(default rows:500) - Run with rows:
yarn perf 1000 - Record baseline:
yarn perf:record 1000 - Check against baseline:
yarn perf:check 1000
Notes:
- Baselines are row-specific (
benchmarks/minidom/perf-baseline.<rows>.json). - Output includes run metrics and unmount metrics (
UnmMed,UnmP90). - In interactive
runmode:Enterreruns,qquits.
Useful environment variables:
PERF_SAMPLES(default20)PERF_WARMUPS(default5)PERF_MAX_REGRESSION_PCT(default5)PERF_FAIL_ON_REGRESSION(1fail,0warn)
Example:
PERF_SAMPLES=30 PERF_WARMUPS=8 PERF_MAX_REGRESSION_PCT=3 yarn perf:check 1000 Run Profiler (CPU Hotspot Workflow)
Use this before optimization work. It prevents random tuning and points to real hotspots.
Quick start:
yarn perf:profile(default rows:2000, top lines:30)yarn perf:profile 2000 40(custom rows + hotspot line count)
What the command does:
- Bundles
benchmarks/minidom/perf.tsto plain Node JS. - Runs Node CPU profiler on that bundle.
- Produces:
.cpuprofilefile for Chrome DevTools.summary.txthotspot summary
- Saves artifacts under
benchmarks/minidom/profiles/.
Profile artifacts:
benchmarks/minidom/profiles/perf-<rows>-<timestamp>.cpuprofilebenchmarks/minidom/profiles/perf-<rows>-<timestamp>.summary.txt
Recommended Optimization Loop
- Reproduce with
yarn perf <rows>and browser benchmark. - Capture profile with
yarn perf:profile <rows>. - Change one thing only.
- Re-run
yarn perf:check <rows>. - Validate functional correctness with tests.
- Re-check browser benchmark to confirm user-visible impact.
Practical Rules
- Optimize measured hotspots, not assumptions.
- Prefer algorithmic wins over micro-tweaks.
- Keep median and p90 both healthy.
- Use row counts that match your real product usage.