2026-09-08 19:55:20 +02:00
|
|
|
// Real-browser benchmark (Playwright Chromium): @uhhm/buuh-html vs µhtml v5,
|
2026-09-08 17:59:53 +02:00
|
|
|
// 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: {
|
2026-09-08 19:55:20 +02:00
|
|
|
'@uhhm/buuh-html': '/packages/html/browser.js',
|
|
|
|
|
'@uhhm/buuh-html/morph': '/packages/html/morph.js',
|
2026-09-08 17:59:53 +02:00
|
|
|
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 () => {
|
2026-09-08 19:55:20 +02:00
|
|
|
const { default: html } = await import('@uhhm/buuh-html')
|
|
|
|
|
const { default: morph } = await import('@uhhm/buuh-html/morph')
|
2026-09-08 17:59:53 +02:00
|
|
|
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 = {}
|
2026-09-08 19:55:20 +02:00
|
|
|
out['@uhhm/buuh-html create'] = bench((t) => ourTable(data(t)))
|
2026-09-08 17:59:53 +02:00
|
|
|
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)
|
2026-09-08 19:55:20 +02:00
|
|
|
out['@uhhm/buuh-html + nanomorph update'] = bench((t) => morph(live, ourTable(data(t))))
|
2026-09-08 17:59:53 +02:00
|
|
|
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()
|
