diff options
Diffstat (limited to 'vrsite/bench-browser.mjs')
| -rw-r--r-- | vrsite/bench-browser.mjs | 135 |
1 files changed, 0 insertions, 135 deletions
diff --git a/vrsite/bench-browser.mjs b/vrsite/bench-browser.mjs deleted file mode 100644 index 97b3a86..0000000 --- a/vrsite/bench-browser.mjs +++ /dev/null @@ -1,135 +0,0 @@ -#!/usr/bin/env node -// Browser render benchmark for vrsite pages: drives headless Chrome over CDP -// (no npm deps; node >= 22 for native WebSocket). Serves the site dir, loads -// each page N times, reports parse/paint/load timings, node count, and the -// cost of jumping to the bottom of the file. -// -// node bench-browser.mjs SITE_DIR PAGE [PAGE...] [--shot DIR] - -import { spawn } from "node:child_process"; -import { createReadStream, existsSync, mkdirSync, writeFileSync } from "node:fs"; -import http from "node:http"; -import path from "node:path"; -import { tmpdir } from "node:os"; - -const CHROME = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"; -const RUNS = 3; - -const args = process.argv.slice(2); -const shotIdx = args.indexOf("--shot"); -let shotDir = null; -if (shotIdx >= 0) { - shotDir = args[shotIdx + 1]; - args.splice(shotIdx, 2); - mkdirSync(shotDir, { recursive: true }); -} -const [siteDir, ...pages] = args; -if (!siteDir || pages.length === 0) { - console.error("usage: node bench-browser.mjs SITE_DIR PAGE [PAGE...] [--shot DIR]"); - process.exit(2); -} - -// ── tiny static server ──────────────────────────────────────────────────── -const types = { html: "text/html", css: "text/css", js: "text/javascript" }; -const server = http.createServer((req, res) => { - const file = path.join(siteDir, decodeURIComponent(new URL(req.url, "http://x").pathname)); - if (!existsSync(file)) { res.writeHead(404).end(); return; } - res.writeHead(200, { "content-type": types[path.extname(file).slice(1)] ?? "text/plain" }); - createReadStream(file).pipe(res); -}); -await new Promise(r => server.listen(0, r)); -const port = server.address().port; - -// ── chrome + CDP ────────────────────────────────────────────────────────── -const profile = path.join(tmpdir(), "vrsite-bench-profile"); -const chrome = spawn(CHROME, [ - "--headless=new", "--remote-debugging-port=0", `--user-data-dir=${profile}`, - "--no-first-run", "--disable-extensions", "--window-size=1600,1000", "about:blank", -], { stdio: ["ignore", "ignore", "pipe"] }); -const wsUrl = await new Promise((resolve, reject) => { - let buf = ""; - chrome.stderr.on("data", d => { - buf += d; - const m = buf.match(/DevTools listening on (ws:\/\/\S+)/); - if (m) resolve(m[1]); - }); - chrome.on("exit", () => reject(new Error("chrome exited"))); -}); -const debugPort = new URL(wsUrl).port; -const targets = await (await fetch(`http://127.0.0.1:${debugPort}/json/list`)).json(); -const pageTarget = targets.find(t => t.type === "page"); - -const ws = new WebSocket(pageTarget.webSocketDebuggerUrl); -await new Promise(r => (ws.onopen = r)); -let msgId = 0; -const pending = new Map(); -const eventWaiters = new Map(); -ws.onmessage = e => { - const msg = JSON.parse(e.data); - if (msg.id && pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); } - if (msg.method && eventWaiters.has(msg.method)) { - eventWaiters.get(msg.method)(msg.params); - eventWaiters.delete(msg.method); - } -}; -const cdp = (method, params = {}) => new Promise(resolve => { - const id = ++msgId; - pending.set(id, m => resolve(m.result)); - ws.send(JSON.stringify({ id, method, params })); -}); -const waitEvent = method => new Promise(r => eventWaiters.set(method, r)); -const evaluate = async expr => { - const r = await cdp("Runtime.evaluate", { expression: expr, returnByValue: true, awaitPromise: true }); - return r.result?.value; -}; - -await cdp("Page.enable"); -await cdp("Runtime.enable"); - -const median = a => [...a].sort((x, y) => x - y)[a.length >> 1]; - -console.log("page kB nodes parse FCP DCL load toBottom"); -for (const p of pages) { - const url = `http://127.0.0.1:${port}/${p}`; - const runs = []; - for (let i = 0; i < RUNS; i++) { - const loaded = waitEvent("Page.loadEventFired"); - await cdp("Page.navigate", { url }); - await loaded; - const m = await evaluate(`(async () => { - await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))); - const nav = performance.getEntriesByType("navigation")[0]; - const fcp = performance.getEntriesByType("paint").find(e => e.name === "first-contentful-paint"); - const t0 = performance.now(); - window.scrollTo(0, document.body.scrollHeight); - await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))); - const toBottom = performance.now() - t0; - return JSON.stringify({ - kb: Math.round(nav.transferSize / 1024), - nodes: document.getElementsByTagName("*").length, - parse: Math.round(nav.domInteractive), - fcp: Math.round(fcp?.startTime ?? -1), - dcl: Math.round(nav.domContentLoadedEventEnd), - load: Math.round(nav.loadEventEnd), - toBottom: Math.round(toBottom), - }); - })()`); - runs.push(JSON.parse(m)); - } - const med = k => median(runs.map(r => r[k])); - console.log( - p.padEnd(38) + String(med("kb")).padStart(6) + String(med("nodes")).padStart(8) + - String(med("parse")).padStart(9) + String(med("fcp")).padStart(8) + - String(med("dcl")).padStart(8) + String(med("load")).padStart(8) + - String(med("toBottom")).padStart(10)); - if (shotDir) { - await evaluate(`window.scrollTo(0, 0)`); - await evaluate(`new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)))`); - const shot = await cdp("Page.captureScreenshot", { format: "png" }); - writeFileSync(path.join(shotDir, p.replaceAll("/", "_") + ".png"), Buffer.from(shot.data, "base64")); - } -} - -chrome.kill(); -server.close(); -process.exit(0); |
