Kinetica vs React, Preact, Vue, Svelte & vanilla JS

Overall

One number per framework: how many times slower it is than the fastest contender, averaged (geometric mean) over all 13 DOM operations. 1.00× would mean fastest at everything.

Duration by operation

Median duration in milliseconds from the trusted click to the end of the last paint, measured from Chrome traces. The small factor under each value is the slowdown relative to the fastest framework in that row. Hover a cell for the full distribution. Operations 10–13 repeat the partial operations on a 10,000-row table — where accidental O(n²) bookkeeping shows up.

Per operation

Same data as the table, drawn to scale — each chart normalized to its own slowest bar. Lower is better.

GC time inside operations

Milliseconds spent in V8/Blink garbage collection between the click and the last paint (median; the percentage is the share of the whole operation). High GC share means the operation's cost is allocation pressure, not DOM work — the table only lists operations where some framework pays ≥1ms.

Scaling curves

The default 1k–20k curve catches complexity-class regressions that a single-size table can't see. The same partial operation is measured at 1k, 2k, 5k, 10k, 20k rows and fitted as duration ∝ n^exponent (log-log least squares). Select and swap should be near-flat, update near-linear; a ⚠ cell exceeds its threshold. Hover for the per-size medians.

Sustained updates

The discrete operations measure a single click; this measures steady-state throughput — the app mutates every 10th of 1,000 rows on every animation frame (dbmonster-style) while a collector records real frame times.

Deep tree

A keyed tree of 1555 nested nodes (depth 4, fanout 6) instead of a flat table: creation, re-labelling every 10th leaf, reversing the six top-level subtrees (big keyed moves), and a no-op re-render with unchanged data — the last one isolates pure component/reconciliation overhead, where fine-grained frameworks should approach zero work.

Startup & memory

Heap across churn & unmount (MB, forced GC)

Replace/create-clear cycles surface retained garbage; the unmount columns surface leaks — the heap after five mount/unmount cycles should match the heap after the first unmount (⚠ marks >0.3 MB growth).

Reading the results

Methodology

Benchmark suite

The keyed scenario of js-framework-benchmark (krausest): the app is a table of rows (id, label link that selects, remove icon); operations are create 1,000 / replace 1,000 / partial-update every 10th / select / swap rows 2↔999 / remove one / create 10,000 / append 1,000 / clear, plus the same partial operations on the 10,000-row table. Labels come from the benchmark's standard adjective-colour-noun generator.

Measurement

Playwright trusted clicks; per-operation Chrome trace (devtools.timeline); duration = click EventDispatch start -> end of last Paint/Commit event; headless Chrome for Testing; local static server. No CPU throttling. Each operation: 3 warmup runs, then 10 measured samples; the table reports medians. State is reset between samples so every measured click does identical work. GC time sums V8/Blink collection events inside the measured window of the same trace.

Extended suites

Startup script time and blocking time come from two additional traced cold loads. Memory churn clicks through 5× replace and 10× create+clear cycles, then exercises each app's __unmount/__mount hooks with a forced GC between readings. Sustained updates toggle the app's animate button (every 10th row re-labelled per rAF) while an injected collector records frame deltas. Scaling curves re-measure select/swap/update at 1k–20k rows and fit a log-log slope. The deep-tree suite (driver/tree.mjs) runs create/update/reverse/no-op on a 1,555-node keyed tree.

Fairness

All apps render the same DOM structure (table/tr/td, same CSS file, no hover styles) from the same page shell on the same local server. Kinetica differs only where its DSL requires it: selectable labels and remove controls are <button> elements rather than <a>, and it is mounted with KineticaRuntime(debug = false). React, Preact, Vue and Svelte are minified production builds (Vue includes its runtime template compiler; op timings are unaffected). Vanilla JS is a direct-DOM baseline with event delegation. Tree apps use no user-land memoization, so the no-op render measures each framework's honest re-render cost.

Environment

Apple M4 Max, 36 GB RAM, darwin/arm64, Chromium 149.0.7827.55 headless, no CPU throttling, one framework at a time.