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
This commit is contained in:
Bendik Aagaard Lynghaug
co-authored by
Claude Fable 5
Claude Fable 5
parent
63b56144a5
commit
c9f5ba2fda
@@ -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()
|
||||
+114
@@ -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')
|
||||
Reference in New Issue
Block a user