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()