bench: @choojs/html vs nanohtml v1 vs µhtml v5, happy-dom + real Chromium

npm run bench (happy-dom, all three engines) and npm run bench:browser (Playwright Chromium, the two ESM engines). Honest numbers recorded in docs/v8.md: we create ~12% faster than µhtml in real Chromium (the parse-once/clone design), µhtml updates in place ~5x faster than fresh-tree + nanomorph (choo's architectural cost, mitigated by component caching), and server strings are on par with nanohtml v1. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd
2026-09-08 17:59:53 +02:00
parent 63b56144a5
commit c9f5ba2fda
4 changed files with 214 additions and 5 deletions
@@ -0,0 +1,80 @@
+// Real-browser benchmark (Playwright Chromium): @choojs/html vs µhtml v5,
+// same create/update scenarios as bench/render.js but with native DOM.
+// nanohtml v1 is CJS-only and can't be import-mapped, so it only appears
+// in the happy-dom bench.
+//
+//   node bench/real-browser.js
+
+import { chromium } from 'playwright'
+import { startServer } from '../test/e2e/serve.js'
+
+const srv = await startServer()
+const browser = await chromium.launch()
+const page = await browser.newPage()
+
+const PAGE = `<!doctype html>
+<html><head><meta charset="utf-8">
+<script type="importmap">${JSON.stringify({
+  imports: {
+    '@choojs/html': '/packages/html/browser.js',
+    '@choojs/html/morph': '/packages/html/morph.js',
+    uhtml: '/node_modules/uhtml/dist/prod/dom.js'
+  }
+})}</script>
+</head><body></body></html>`
+
+await page.route('**/bench-page', (route) => route.fulfill({ contentType: 'text/html', body: PAGE }))
+await page.goto(srv.origin + '/bench-page')
+
+const results = await page.evaluate(async () => {
+  const { default: html } = await import('@choojs/html')
+  const { default: morph } = await import('@choojs/html/morph')
+  const { html: uhtml, render: urender } = await import('uhtml')
+
+  const ROWS = 100
+  const data = (tick) => Array.from({ length: ROWS }, (_, i) => ({
+    id: i, label: 'row ' + i + ' rev ' + tick, selected: i === tick % ROWS
+  }))
+
+  const bench = (fn) => {
+    let t = 0
+    const warmupEnd = performance.now() + 200
+    while (performance.now() < warmupEnd) fn(t++)
+    let ops = 0
+    const start = performance.now()
+    const end = start + 1000
+    while (performance.now() < end) { fn(t++); ops++ }
+    return Math.round((ops / (performance.now() - start)) * 1000)
+  }
+
+  const ourTable = (rows) => html`<table><tbody>${rows.map((r) => html`<tr class=${r.selected ? 'selected' : ''}><td>${r.id}</td><td>${r.label}</td></tr>`)}</tbody></table>`
+  const uTable = (rows) => uhtml`<table><tbody>${rows.map((r) => uhtml`<tr class=${r.selected ? 'selected' : ''}><td>${r.id}</td><td>${r.label}</td></tr>`)}</tbody></table>`
+
+  const out = {}
+  out['@choojs/html create'] = bench((t) => ourTable(data(t)))
+  out['uhtml v5 create (fresh container)'] = bench((t) => {
+    const c = document.createElement('div')
+    urender(c, uTable(data(t)))
+  })
+
+  const live = ourTable(data(0))
+  document.body.appendChild(live)
+  out['@choojs/html + nanomorph update'] = bench((t) => morph(live, ourTable(data(t))))
+  live.remove()
+
+  const c = document.createElement('div')
+  document.body.appendChild(c)
+  out['uhtml v5 update (in place)'] = bench((t) => urender(c, uTable(data(t))))
+  c.remove()
+
+  return out
+})
+
+console.log('\nreal Chromium — 100-row table, ops/s:')
+for (const [name, ops] of Object.entries(results)) {
+  console.log('  ' + name.padEnd(38) + String(ops).padStart(8) + ' ops/s')
+}
+console.log()
+
+await browser.close()
+await srv.close()
@@ -0,0 +1,114 @@
+// Rendering benchmarks: @choojs/html vs nanohtml v1 vs µhtml.
+//
+//   npm run bench
+//
+// Two environments:
+// - server: pure string rendering in Node (no DOM at all)
+// - browser-path: DOM construction in happy-dom. Caveat: happy-dom is a
+//   JS DOM, so absolute numbers are not real-browser numbers — but all
+//   contenders pay the same DOM tax, so the relative ordering is
+//   indicative of template-engine overhead.
+//
+// Scenarios: "create" builds a fresh 100-row table per iteration;
+// "update" re-renders the same live tree with new data each iteration
+// (choo-style engines build fresh + morph, µhtml updates holes in place).
+
+import { createRequire } from 'node:module'
+const require = createRequire(import.meta.url)
+
+const ROWS = 100
+const DURATION_MS = 500
+const WARMUP_MS = 100
+
+function data (tick) {
+  const rows = new Array(ROWS)
+  for (let i = 0; i < ROWS; i++) {
+    rows[i] = { id: i, label: 'row ' + i + ' rev ' + tick, selected: i === tick % ROWS }
+  }
+  return rows
+}
+
+function bench (name, fn) {
+  let t = performance.now()
+  const warmupEnd = t + WARMUP_MS
+  let tick = 0
+  while (performance.now() < warmupEnd) fn(tick++)
+
+  let ops = 0
+  const start = performance.now()
+  const end = start + DURATION_MS
+  while (performance.now() < end) {
+    fn(tick++)
+    ops++
+  }
+  const elapsed = performance.now() - start
+  const opsSec = Math.round((ops / elapsed) * 1000)
+  console.log('  ' + name.padEnd(34) + String(opsSec).padStart(8) + ' ops/s')
+  return opsSec
+}
+
+// ---------- server (string) rendering ----------
+
+console.log('\nserver rendering — %d-row table to string:', ROWS)
+{
+  const { default: ourHtml } = await import('@choojs/html/server')
+  const nano = require('nanohtml') // main entry is the server renderer
+
+  const table = (html, rows) => html`<table><tbody>${rows.map((r) => html`<tr class=${r.selected ? 'selected' : ''}><td>${r.id}</td><td>${r.label}</td></tr>`)}</tbody></table>`
+
+  bench('@choojs/html (server)', (t) => String(table(ourHtml, data(t))))
+  bench('nanohtml v1 (server)', (t) => String(table(nano, data(t))))
+}
+
+// ---------- browser-path rendering (happy-dom) ----------
+
+const { Window } = await import('happy-dom')
+const win = new Window()
+globalThis.window = win
+globalThis.document = win.document
+// µhtml touches DOM constructors as ambient globals at import time
+for (const name of [
+  'DocumentFragment', 'HTMLElement', 'SVGElement', 'Element', 'Node',
+  'Text', 'Comment', 'Range', 'MutationObserver', 'customElements',
+  'requestAnimationFrame', 'cancelAnimationFrame'
+]) {
+  if (!(name in globalThis) && name in win) globalThis[name] = win[name]
+}
+
+const { default: ourBrowserHtml } = await import('@choojs/html/browser')
+const { default: morph } = await import('@choojs/html/morph')
+const nanoBrowser = require('nanohtml/lib/browser.js')
+const { html: uhtml, render: urender } = await import('uhtml')
+
+const table = (html, rows) => html`<table><tbody>${rows.map((r) => html`<tr class=${r.selected ? 'selected' : ''}><td>${r.id}</td><td>${r.label}</td></tr>`)}</tbody></table>`
+
+console.log('\nbrowser-path create — fresh %d-row table per iteration (happy-dom):', ROWS)
+bench('@choojs/html (cached templates)', (t) => table(ourBrowserHtml, data(t)))
+bench('nanohtml v1 (hyperx runtime)', (t) => table(nanoBrowser, data(t)))
+bench('uhtml v5 (fresh container)', (t) => {
+  const c = document.createElement('div')
+  urender(c, uhtml`<table><tbody>${data(t).map((r) => uhtml`<tr class=${r.selected ? 'selected' : ''}><td>${r.id}</td><td>${r.label}</td></tr>`)}</tbody></table>`)
+})
+
+console.log('\nbrowser-path update — re-render same live tree (happy-dom):')
+{
+  const live = table(ourBrowserHtml, data(0))
+  document.body.appendChild(live)
+  bench('@choojs/html + nanomorph', (t) => morph(live, table(ourBrowserHtml, data(t))))
+  document.body.removeChild(live)
+}
+{
+  const live = table(nanoBrowser, data(0))
+  document.body.appendChild(live)
+  bench('nanohtml v1 + nanomorph', (t) => morph(live, table(nanoBrowser, data(t))))
+  document.body.removeChild(live)
+}
+{
+  const c = document.createElement('div')
+  document.body.appendChild(c)
+  const view = (t) => uhtml`<table><tbody>${data(t).map((r) => uhtml`<tr class=${r.selected ? 'selected' : ''}><td>${r.id}</td><td>${r.label}</td></tr>`)}</tbody></table>`
+  bench('uhtml v5 (keyed holes, in place)', (t) => urender(c, view(t)))
+  document.body.removeChild(c)
+}
+
+console.log('\ncaveat: happy-dom numbers are indicative (same DOM tax for all), not real-browser numbers.\n')
@@ -44,9 +44,21 @@ everything new lives under `packages/`.
      wildcard decode, decoded state.href
 - [x] Phase 2 (core): browser renderer rewrite, `@choojs/component`,
      zero-build counter example, full-app integration test in happy-dom
- [ ] Phase 2 (remaining): adoption-style hydration with mismatch
-      warnings, Playwright suite in a real browser, benchmarks vs
-      nanohtml v1 / µhtml
+- [x] Phase 2 (tail): adoption-style hydration with mismatch warnings
+      (`@choojs/html/hydrate`, wired into `mount()`), real-browser
+      Playwright e2e (zero-build page, SSR-then-hydrate page, adoption
+      proof; CI job included), benchmarks vs nanohtml v1 / µhtml
+
+## Benchmarks (2026-09, 100-row table, `npm run bench` / `bench:browser`)
+
+Real Chromium: @choojs/html creates fresh trees ~12% faster than µhtml v5
+(3.5k vs 3.1k ops/s) — the parse-once/clone design pays off in native DOM.
+µhtml updates in place ~5x faster than our fresh-tree + nanomorph loop
+(3.0k vs 0.6k ops/s): that is choo's architectural cost, mitigated in real
+apps by @choojs/component caching (proxy nodes skip unchanged subtrees),
+and the number to beat if Phase 3 explores keyed-hole optimizations.
+Server string rendering is on par with nanohtml v1 (~13k ops/s, within
+6%). happy-dom numbers in bench/render.js are indicative only.
 - [ ] Phase 3: v8 wiring (`toStream`, devtools, codemod). Includes the
      answer to choojs/choo#653 (async/lazy routes): route handlers may
      resolve lazily via native import(); browser renders previous tree
@@ -13,12 +13,15 @@
  "scripts": {
    "test": "node --test packages/core/test/ packages/html/test/ packages/component/test/",
    "test:e2e": "node --test test/e2e/",
-    "bench": "node bench/render.js"
+    "bench": "node bench/render.js",
+    "bench:browser": "node bench/real-browser.js"
  },
  "repository": "choojs/choo",
  "license": "MIT",
  "devDependencies": {
    "happy-dom": "^20.14.0",
-    "playwright": "^1.63.0"
+    "nanohtml": "^1.10.0",
+    "playwright": "^1.63.0",
+    "uhtml": "^5.0.9"
  }
 }