Restyle fewer elements for :has() and cache the box model and marker style

.github/workflows/bench.yml

@@ -0,0 +1,32 @@
+name: Benchmarks
+
+on:
+  pull_request:
+
+# Shared runners are too noisy to fail a pull request on a number, so the
+# comparison is a report in the job summary, not a check.
+jobs:
+  compare:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 26
+
+      - run: bun install --frozen-lockfile
+
+      - name: Compare with the base branch
+        run: |
+          {
+            echo "## Benchmarks: median CPU time, base against this pull request"
+            echo
+            node bench/run.ts --runs 3 --against "origin/${{ github.base_ref }}" --markdown
+          } >> "$GITHUB_STEP_SUMMARY"

bench/editor.ts

@@ -0,0 +1,49 @@
+/**
+ * CodeMirror as the example runs it, on a 400-line file, with the cursor
+ * near the top.
+ */
+import {installGlobals, mount, nextFrame} from "./harness.ts";
+
+export async function mountEditor(): Promise<{proc: any; dom: any; view: any}> {
+	const {proc, dom} = await mount(100, 40, {cellSize: "auto"});
+	installGlobals(dom);
+	const {EditorState} = await import("@codemirror/state");
+	const {EditorView, keymap, lineNumbers} = await import("@codemirror/view");
+	const {defaultKeymap, history, historyKeymap} = await import(
+		"@codemirror/commands",
+	);
+	const {javascript} = await import("@codemirror/lang-javascript");
+	const {defaultHighlightStyle, syntaxHighlighting} = await import(
+		"@codemirror/language",
+	);
+
+	const {document} = dom;
+	document.body.innerHTML = "<h1>Editor</h1><div id=editor></div>";
+	const doc = Array.from(
+		{length: 100},
+		(_, i) =>
+			[
+				`function step${i}(value: number, rect: {x: number; y: number}): number {`,
+				`\tconst scaled = value * ${i + 1} + rect.x; // step ${i}`,
+				"\treturn Math.max(scaled, rect.y);",
+				"}",
+			].join("\n"),
+	).join("\n");
+	const view = new EditorView({
+		state: EditorState.create({
+			doc,
+			extensions: [
+				lineNumbers(),
+				history(),
+				javascript({typescript: true}),
+				syntaxHighlighting(defaultHighlightStyle),
+				keymap.of([...defaultKeymap, ...historyKeymap]),
+			],
+		}),
+		parent: document.getElementById("editor"),
+	});
+	view.focus();
+	view.dispatch({selection: {anchor: doc.indexOf("\n", 200)}});
+	await nextFrame(dom);
+	return {proc, dom, view};
+}

bench/harness.ts

@@ -0,0 +1,161 @@
+/**
+ * What every scenario shares. A scenario runs against the checkout named
+ * by its first argument, so the runner can point the same scenario at two
+ * checkouts, and prints one JSON line per measurement.
+ */
+import {spawn} from "node:child_process";
+import {readFileSync} from "node:fs";
+import {availableParallelism} from "node:os";
+
+export const root = process.argv[2];
+
+/** The bench's own checkout, which every input is read from. */
+export const benchRoot = new URL("..", import.meta.url).pathname;
+
+const index = await import(`${root}/src/index.ts`);
+const utils = await import(`${root}/tests/test-utils.ts`);
+const painter = await import(`${root}/src/internal/painter.ts`);
+// The test utilities check every partial frame against a whole one, which
+// is not what a user's frame costs.
+if (painter.partialFrameCheck !== undefined) {
+	painter.partialFrameCheck.enabled = false;
+}
+const cssom = await import(`${root}/src/internal/cssom.ts`);
+if (cssom.styleCheck !== undefined) {
+	cssom.styleCheck.enabled = false;
+}
+const layout = await import(`${root}/src/internal/layout.ts`);
+if (layout.layoutCheck !== undefined) {
+	layout.layoutCheck.enabled = false;
+}
+
+export const TermDOM = index.TermDOM;
+export const installGlobals = index.installGlobals;
+export const MockProcess = utils.MockProcess;
+export const nextFrame: (dom: unknown) => Promise<void> = utils.nextFrame;
+
+export function readBenchFile(path: string): string {
+	return readFileSync(`${benchRoot}${path}`, "utf8");
+}
+
+export async function mount(
+	cols = 100,
+	rows = 40,
+	options: object = {},
+): Promise<{proc: any; dom: any}> {
+	const proc = new MockProcess({cols, rows});
+	const dom = new TermDOM({...options, transport: proc.transport});
+	dom.attach();
+	await nextFrame(dom);
+	return {proc, dom};
+}
+
+/**
+ * The terminal becomes a sink once the page is up, so what is measured
+ * is the engine and not the emulator reading its output.
+ */
+export function silence(proc: any): void {
+	proc.stdout.write = (_chunk: unknown, enc?: unknown, cb?: unknown) => {
+		const callback = typeof enc === "function" ? enc : cb;
+		if (typeof callback === "function") {
+			(callback as () => void)();
+		}
+		return true;
+	};
+}
+
+/** CPU time, so the time a frame waits for its turn is not counted. */
+export function cpuMs(): number {
+	const {user, system} = process.cpuUsage();
+	return (user + system) / 1000;
+}
+
+export function report(label: string, times: number[]): void {
+	const sorted = [...times].sort((a, b) => a - b);
+	const median = sorted[Math.floor(sorted.length / 2)];
+	console.log(JSON.stringify({label, median}));
+}
+
+export async function measure(
+	label: string,
+	steps: number,
+	step: (i: number) => Promise<void> | void,
+	warm = 10,
+): Promise<void> {
+	for (let i = 0; i < warm; i++) {
+		await step(i);
+	}
+	const times: number[] = [];
+	for (let i = warm; i < warm + steps; i++) {
+		const start = cpuMs();
+		await step(i);
+		times.push(cpuMs() - start);
+	}
+	report(label, times);
+}
+
+/**
+ * Reports wall times as a measurement, and prints their percentiles, which
+ * a median alone hides, to stderr.
+ */
+export function describeLatency(label: string, times: number[]): void {
+	report(label, times);
+	const sorted = [...times].sort((a, b) => a - b);
+	const at = (q: number): string =>
+		sorted[Math.floor(sorted.length * q)].toFixed(1);
+	console.error(
+		`${label}: p50 ${at(0.5)} p90 ${at(0.9)} p99 ${at(0.99)} max ${sorted.at(-1)!.toFixed(1)}`,
+	);
+}
+
+/**
+ * Times each key from reaching the program to its frame reaching the
+ * terminal, typed at a person's pace.
+ */
+export function keyLatency(proc: any): (key: string) => Promise<number> {
+	let wrote: (() => void) | null = null;
+	proc.stdout.write = (_chunk: unknown, enc?: unknown, cb?: unknown) => {
+		wrote?.();
+		const callback = typeof enc === "function" ? enc : cb;
+		if (typeof callback === "function") {
+			(callback as () => void)();
+		}
+		return true;
+	};
+	return async (key) => {
+		await new Promise((resolve) => setTimeout(resolve, 40));
+		const painted = new Promise<void>((resolve) => {
+			wrote = resolve;
+		});
+		const start = performance.now();
+		proc.stdin.simulateResponse(key);
+		await painted;
+		wrote = null;
+		return performance.now() - start;
+	};
+}
+
+/** Runs the work with an idle machine, every core busy, and two spinners a core. */
+export async function underLoad(
+	label: string,
+	work: () => Promise<number[]>,
+): Promise<void> {
+	describeLatency(`${label}, idle`, await work());
+	for (const [load, perCore] of [
+		["every core busy", 1],
+		["two spinners a core", 2],
+	] as const) {
+		const spinners = Array.from(
+			{length: availableParallelism() * perCore},
+			() => spawn(process.execPath, ["-e", "for (;;) {}"], {stdio: "ignore"}),
+		);
+		await new Promise((resolve) => setTimeout(resolve, 300));
+		try {
+			describeLatency(`${label}, ${load}`, await work());
+		} finally {
+			for (const spinner of spinners) {
+				spinner.kill();
+			}
+		}
+	}
+}

bench/run.ts

@@ -0,0 +1,145 @@
+/**
+ * Runs the scenarios in bench/scenarios, each in a process of its own,
+ * and prints the median CPU time of each measurement.
+ *
+ *   node bench/run.ts [--runs N] [--only a,b] [--against REF] [--markdown]
+ *
+ * --against checks REF out into a temporary worktree and runs the same
+ * scenarios against it, alternating with this checkout, so both sides
+ * share whatever the machine was doing.
+ */
+import {spawnSync} from "node:child_process";
+import {mkdtempSync, readdirSync, rmSync, symlinkSync} from "node:fs";
+import {tmpdir} from "node:os";
+import {join} from "node:path";
+
+const benchRoot = new URL("..", import.meta.url).pathname;
+const scenarioDirectory = new URL("scenarios/", import.meta.url).pathname;
+
+function option(name: string): string | undefined {
+	const index = process.argv.indexOf(name);
+	return index === -1 ? undefined : process.argv[index + 1];
+}
+
+const runs = Number(option("--runs") ?? 3);
+const only = option("--only")?.split(",");
+const against = option("--against");
+const markdown = process.argv.includes("--markdown");
+
+const scenarios = readdirSync(scenarioDirectory)
+	.filter((name) => name.endsWith(".ts"))
+	.map((name) => name.slice(0, -3))
+	.filter((name) => only === undefined || only.includes(name));
+
+function git(...args: string[]): void {
+	const result = spawnSync("git", args, {cwd: benchRoot, stdio: "inherit"});
+	if (result.status !== 0) {
+		throw new Error(`git ${args.join(" ")} failed`);
+	}
+}
+
+function runScenario(name: string, root: string): Map<string, number> {
+	const result = spawnSync(
+		process.execPath,
+		[...process.execArgv, join(scenarioDirectory, `${name}.ts`), root],
+		{
+			cwd: root,
+			encoding: "utf8",
+			timeout: 600_000,
+			stdio: ["ignore", "pipe", "pipe"],
+		},
+	);
+	const medians = new Map<string, number>();
+	for (const line of result.stdout.split("\n")) {
+		if (line.startsWith("{")) {
+			const {label, median} = JSON.parse(line);
+			medians.set(label, median);
+		}
+	}
+	if (medians.size === 0) {
+		console.error(`${name} on ${root} reported nothing:\n${result.stderr}`);
+	}
+	return medians;
+}
+
+function median(values: number[]): number {
+	const sorted = [...values].sort((a, b) => a - b);
+	return sorted[Math.floor(sorted.length / 2)];
+}
+
+const roots: Array<{name: string; path: string}> = [];
+let worktree: string | undefined;
+if (against !== undefined) {
+	worktree = mkdtempSync(join(tmpdir(), "termdom-bench-"));
+	git("worktree", "add", "--detach", worktree, against);
+	symlinkSync(join(benchRoot, "node_modules"), join(worktree, "node_modules"));
+	roots.push({name: against, path: worktree});
+}
+roots.push({name: "this checkout", path: benchRoot.replace(/\/$/, "")});
+
+const samples = new Map<string, Map<string, number[]>>();
+try {
+	for (let run = 0; run < runs; run++) {
+		for (const scenario of scenarios) {
+			for (const root of roots) {
+				for (const [label, value] of runScenario(scenario, root.path)) {
+					let byRoot = samples.get(label);
+					if (byRoot === undefined) {
+						byRoot = new Map();
+						samples.set(label, byRoot);
+					}
+					const values = byRoot.get(root.name) ?? [];
+					values.push(value);
+					byRoot.set(root.name, values);
+				}
+			}
+		}
+		console.error(`run ${run + 1} of ${runs} done`);
+	}
+} finally {
+	if (worktree !== undefined) {
+		rmSync(join(worktree, "node_modules"));
+		git("worktree", "remove", "--force", worktree);
+	}
+}
+
+const header = [
+	"Measurement",
+	...roots.map((root) => `${root.name} (ms)`),
+	...(roots.length === 2 ? ["Change"] : []),
+];
+const rows = [...samples].map(([label, byRoot]) => {
+	const values = roots.map((root) => {
+		const values = byRoot.get(root.name);
+		return values === undefined ? NaN : median(values);
+	});
+	const cells = [label, ...values.map((value) => value.toFixed(2))];
+	if (values.length === 2) {
+		const change = (values[1] - values[0]) / values[0] * 100;
+		cells.push(`${change > 0 ? "+" : ""}${change.toFixed(0)}%`);
+	}
+	return cells;
+});
+
+if (markdown) {
+	console.log(`| ${header.join(" | ")} |`);
+	console.log(
+		`|${header.map((_, i) => i === 0 ? " --- " : " ---: ").join("|")}|`,
+	);
+	for (const row of rows) {
+		console.log(`| ${row.join(" | ")} |`);
+	}
+} else {
+	const widths = header.map((_, i) =>
+		Math.max(header[i].length, ...rows.map((row) => row[i].length)));
+	const format = (cells: string[]): string =>
+		cells
+			.map((cell, i) =>
+				i === 0 ? cell.padEnd(widths[i]) : cell.padStart(widths[i]),
+			)
+			.join("  ");
+	console.log(format(header));
+	for (const row of rows) {
+		console.log(format(row));
+	}
+}