#Framework bench: VDOM vs Vapor

Product matrices (storms, FCP): Unified Benchmark Matrix. This page is the Vue framework slice — instrumented BG/e2e, traffic, bundle cost — plus an interactive playground. ReactLynx is a reference baseline, not the subject under test.

Same Vue app in both modes, full dual-thread pipeline (Vue core benchmark ported to Lynx). Select = point update; Update = batch update.

#Try it

Tap the same buttons the harness clicks. Badge = tap → DOM settled. Compare Vue Vapor / Vue VDOM; ReactLynx (memo) is there as a reference so you can feel the order of magnitude — not as a ReactLynx product bench (that lives in the unified matrix).

What to try: Create 10k → Select storm (point) → Update storm (batch).

#Instrumented BG / e2e

e2e < bg because both modes emit near-identical ops — the delta is Vue work on the background thread (shared with your app logic).

Creation e2e is ~parity (vapor create1k ~0.87× … create10k ~0.94×). See vapor mode for REGISTER_TREE / CLONE_TREE.

#Cross-thread traffic (create 1k)

On Lynx for Web this barely moves e2e (DOM construction dominates). On native the payload crosses a serialization boundary — halving it matters more there.

#Startup, memory, bundle

#Reproduce

pnpm --filter vue-lynx-benchmark bench          # instrumented
pnpm --filter vue-lynx-benchmark bench:cross    # black-box (+ React ref)
pnpm --filter vue-lynx-benchmark bench:storms

Raw: packages/benchmark/results/.