perf(ranui): build an SSR element in 0.034µs instead of 1.389µs

[chaxus]

HTMLElementMock held style and classList as instance fields containing object literals of arrow functions. An arrow function closes over this, so it cannot live on the prototype: every element allocated two objects and six closures in its constructor, plus a Map for event listeners and another for inline styles — whether or not anything ever touched them. Almost nothing does. A generated page is overwhelmingly elements with a class attribute and a text child.

They are created on first access now; inlineStyles and eventListeners on first write.

Measured

new HTMLElementMock('div') plus two attributes:

	before	after
construct one element	1.389 µs	0.034 µs	41x

End to end — building and serialising a realistic 209-node sidebar 1,393 times, the docs site's page count:

	before	after
total	710 ms	241 ms	2.9x
…of which build	494 ms	80 ms	6.2x
…of which serialise	216 ms	156 ms	—

The bottleneck is now serialisation, which is the work that actually has to happen. Output is byte-identical before and after, checked against the equivalent string-template rendering.

How it was found

Worth recording, because my first two explanations were wrong.

I said the cost was "five objects and two Maps per node". A standalone class of exactly that shape measures 0.060 µs — 3.5% of it. Bisecting each chained call showed new HTMLElementMock() alone accounted for 93%, with .class(), .attr() and .text() adding a tenth of a microsecond between them. Only then did reading the constructor make the closures obvious.

Safety

• inlineStyles is now a ReadonlyMap. The empty map is shared by every element that never set a style, so writing through it would leak one element's styles into all of them. Nothing outside the mock writes to it, and the existing tests read it with .get() and .has(), which the read-only type allows.
• Nothing enumerates an element's own properties — the one thing that would notice a field becoming a getter. Checked across utils/, components/, src/ and test/.
• 1,732 unit tests and 254 SSR tests pass unchanged.

Scope

This is the SSR path only. In a browser the builder wraps real elements from document.createElement, where style and classList are native. A component costs ~15.6 µs to construct there against 0.85 µs for a plain element — a separate question this does not touch.

🤖 Generated with Claude Code

https://claude.ai/code/session_019pjSL6jGCw2wmBLhCAW35d

[cloudflare-workers-and-pages]

Deploying ran with    Cloudflare Pages

Latest commit:	dbcd7d3
Status:	✅  Deploy successful!
Preview URL:	https://2159074c.ran-4ty.pages.dev
Branch Preview URL:	https://perf-builder-lazy-mock-field.ran-4ty.pages.dev

View logs