@tenphi/tasty 0.0.0-snapshot.06c8a41 → 0.0.0-snapshot.07ea4a0

package/docs/runtime-benchmarks.md

@@ -1,7 +1,7 @@
 # Runtime Benchmarks
 
 Tasty keeps its performance claims in reproducible benchmarks rather than
-combining unlike measurements into one score. The repository measures three
+combining unlike measurements into one score. The repository measures five
 different costs:
 
 1. Style parsing and generation in Node.
@@ -34,37 +34,55 @@ code paths in headless Chromium. The first checkout may require
 current `dist/` — run `pnpm build` first.
 
 Run the Node and browser suites separately so they do not compete for CPU. The
-browser timer has 0.1 ms resolution, so both browser benchmarks perform many
+browser timer has 0.1 ms resolution, so the browser benchmarks perform many
 matched operations per sample and divide the absolute difference by the number
-of elements or rules. Machine load, browser versions, and CPU power will move
-the results.
+of elements, rules or interactions. Machine load, browser versions, and CPU
+power will move the results — on a loaded machine the absolute columns drift
+several percent while the raw/Tasty delta holds, so read the delta.
+
+**On a laptop, check the power state first.** Low Power Mode caps CPU frequency,
+and it is the single largest source of error here — larger than background load.
+Measured on the machine below, running on battery with Low Power Mode enabled
+made every one of the 53 Node cases slower, by a median of 26%, and halving the
+background load recovered only 3 points of that. A frequency cap scales every
+case by roughly the same factor, so it does not look like noise; it looks like a
+uniformly slower library. Verify before trusting a run:
+
+```bash
+pmset -g ps | head -2      # want 'AC Power'
+pmset -g | grep -i lowpowermode   # want 0
+```
 
 ## Core Style Pipeline
 
-The following numbers are single-call throughput measured on an Apple M1 Max
-with Node 22:
-
-| Operation                                                   |              ops/sec | Latency (mean) |
-| ----------------------------------------------------------- | -------------------: | -------------: |
-| `renderStyles` — 5 flat properties (cold)                   |              ~60,000 |         ~17 us |
-| `renderStyles` — state map with media/hover/modifier (cold) |              ~18,500 |         ~54 us |
-| `renderStyles` — same styles (cached)                       |           ~5,800,000 |       ~0.17 us |
-| `parseStateKey` — simple key like `:hover` (cold)           |             ~790,000 |        ~1.3 us |
-| `parseStateKey` — complex OR/AND/NOT key (cold)             |             ~140,000 |          ~7 us |
-| `parseStateKey` — any key (cached)                          | ~3,400,000–8,300,000 |    ~0.1–0.3 us |
-| `parseStyle` — value tokens like `2x 4x` (cold)             |             ~344,000 |        ~2.9 us |
-| `parseStyle` — color tokens (cold)                          |             ~567,000 |        ~1.8 us |
-| `parseStyle` — any value (cached)                           |          ~15,250,000 |       ~0.07 us |
+Single-call throughput, three consecutive runs on an Apple M3 Pro with Node
+24.18.0 on AC power:
+
+| Operation                                                   |               ops/sec | Latency (mean) |
+| ----------------------------------------------------------- | --------------------: | -------------: |
+| `renderStyles` — 5 flat properties (cold)                   |       143,000–158,000 |     6.3–7.0 us |
+| `renderStyles` — state map with media/hover/modifier (cold) |         31,000–36,000 |       28–32 us |
+| `renderStyles` — OR state map across contexts (cold)        |         13,000–14,000 |       71–76 us |
+| `renderStyles` — same styles (cached)                       |  9,830,000–10,420,000 |       ~0.10 us |
+| `parseStateKey` — simple key like `:hover` (cold)           |   1,910,000–1,980,000 |       ~0.50 us |
+| `parseStateKey` — value modifier key (cold)                 |   1,120,000–1,160,000 |       ~0.90 us |
+| `parseStateKey` — complex OR/AND/NOT key (cold)             |       341,000–357,000 |     2.8–2.9 us |
+| `parseStateKey` — any key (cached)                          |  4,900,000–16,530,000 |    0.10–0.20 us |
+| `parseStyle` — value tokens like `2x 4x` (cold)             |       575,000–605,000 |       ~1.7 us |
+| `parseStyle` — color tokens (cold)                          |   1,160,000–1,240,000 |    0.80–0.90 us |
+| `parseStyle` — layered functions (cold)                     |       175,000–184,000 |     5.4–5.7 us |
+| `parseStyle` — any value (cached)                           | 29,500,000–30,750,000 |      ~0.03 us |
 
 “Cold” cases use unique inputs to bypass the relevant caches. Cached cases
-reuse one input and measure the LRU hot path. Expect roughly ±10% between runs.
-These benchmarks do not include React, DOM work, stylesheet injection, style
-resolution, layout, or paint.
+reuse one input and measure the LRU hot path. Run-to-run spread on an idle
+machine was 1–7% for most cases, rising to 10–16% for the two `renderStyles`
+cold cases. These benchmarks do not include React, DOM work, stylesheet
+injection, style resolution, layout, or paint.
 
 The benchmark sources are colocated with the code they exercise:
-[`pipeline.bench.ts`](../src/pipeline/pipeline.bench.ts),
-[`parseStateKey.bench.ts`](../src/pipeline/parseStateKey.bench.ts), and the
-parser benchmark files under [`src/parser`](../src/parser).
+[`pipeline.bench.ts`](https://github.com/tenphi/tasty/blob/main/src/pipeline/pipeline.bench.ts),
+[`parseStateKey.bench.ts`](https://github.com/tenphi/tasty/blob/main/src/pipeline/parseStateKey.bench.ts), and the
+parser benchmark files under [`src/parser`](https://github.com/tenphi/tasty/tree/main/src/parser).
 
 ## Empty Wrapper Overhead
 
@@ -73,7 +91,7 @@ Skipping the style pipeline does not make a `tasty()` component free. Even
 tracks another fiber, and Tasty still processes and forwards the element's
 props.
 
-[`tasty-overhead.bench.tsx`](../src/tasty-overhead.bench.tsx) compares 10,000
+[`tasty-overhead.bench.tsx`](https://github.com/tenphi/tasty/blob/main/src/tasty-overhead.bench.tsx) compares 10,000
 raw `<div className>` siblings with 10,000 instances of one module-scoped
 `tasty({})` component. Both receive the same props, and the benchmark fails if
 they do not produce equivalent DOM.
@@ -85,19 +103,19 @@ excludes layout, paint, and stylesheet matching. Every commit is wrapped in
 `flushSync`, keeping its synchronous reconciliation and commit inside the
 sample. This does not estimate React's concurrent scheduling latency.
 
-On an Apple M3 Pro with React 19.2.4 and Chromium 151, three consecutive runs
+On an Apple M3 Pro with React 19.2.8 and Chromium 151, three consecutive runs
 produced these ranges:
 
-| Work on 10,000 siblings             | Raw elements |  `tasty({})` | Extra per wrapped element |
-| ----------------------------------- | -----------: | -----------: | ------------------------: |
-| Mount + remove                      |   4.5–4.9 ms | 14.0–14.9 ms |              0.95–1.00 us |
-| Rerender, same host props           |   1.3–1.4 ms | 10.9–11.4 ms |              0.96–1.00 us |
-| Rerender, change one host attribute |   2.8–3.4 ms | 15.0–15.7 ms |              1.21–1.27 us |
+| Work on 10,000 siblings             | Raw elements | `tasty({})` | Extra per wrapped element |
+| ----------------------------------- | -----------: | ----------: | ------------------------: |
+| Mount + remove                      |   4.2–4.3 ms |  9.2–9.7 ms |              0.50–0.54 us |
+| Rerender, same host props           |   1.2–1.3 ms |  6.3–6.5 ms |              0.51–0.52 us |
+| Rerender, change one host attribute |   2.5–2.7 ms | 11.2–11.6 ms |             0.86–0.91 us |
 
 The useful result is the raw/Tasty time difference divided by 10,000, not the
 ratio between the two times. The ratio becomes large because the raw baseline
-is tiny. In this synthetic workload, an empty wrapper adds roughly 1 us per
-participating element, or 1.2–1.3 us when React also changes a DOM attribute.
+is tiny. In this synthetic workload, an empty wrapper adds roughly 0.5 us per
+participating element, or ~0.9 us when React also changes a DOM attribute.
 
 This is the floor Tasty consumes when it has no styling job. It is not a
 page-level score. Real trees include application components, effects, layout,
@@ -107,7 +125,7 @@ snapshot experiment with controlled garbage collection.
 
 ## Cold Generation and Injection
 
-[`tasty-injection.bench.ts`](../src/tasty-injection.bench.ts) measures the extra
+[`tasty-injection.bench.ts`](https://github.com/tenphi/tasty/blob/main/src/tasty-injection.bench.ts) measures the extra
 work when Tasty must generate and inject CSS that an otherwise equivalent page
 already has. It does not compare different stylesheet insertion techniques.
 
@@ -142,17 +160,23 @@ ranges:
 
 | Workload                                             | CSS already present |  Tasty runtime | Incremental Tasty cost |
 | ---------------------------------------------------- | ------------------: | -------------: | ---------------------: |
-| One new rule + immediate resolution, per transaction |          2.8–3.3 us | 110.3–113.8 us |         107.3–111.0 us |
-| 1,000 new rules + one resolution                     |        1.86–2.06 ms |   9.01–9.98 ms |           7.13–7.92 ms |
-| 1,000-rule workload, incremental cost per rule       |                   — |              — |             7.1–7.9 us |
+| One new rule + immediate resolution, per transaction |          2.6–3.0 us | 102.8–107.0 us |         100.3–104.3 us |
+| 1,000 new rules + one resolution                     |        1.69–1.79 ms |   7.42–7.67 ms |           5.73–5.94 ms |
+| 1,000-rule workload, incremental cost per rule       |                   — |              — |             5.7–5.9 us |
 
 Directly compared, injecting 1,000 rules before one resolution boundary cost
-about 66–71 times as much in total as injecting one rule and resolving it—not
-1,000 times as much. Its average incremental cost per rule was about 14–16
+about 55–59 times as much in total as injecting one rule and resolving it—not
+1,000 times as much. Its average incremental cost per rule was about 17–18
 times lower. This is the same Tasty generation and injection path in both cases;
 the group amortizes fixed transaction work and lets the browser resolve all the
 stylesheet writes together.
 
+The per-transaction single-rule figure is the one number here that engine work
+does not move: it is dominated by the browser's injection-to-resolution
+boundary, which is crossed once per rule regardless of how fast generation is.
+The 1,000-rule column, where Tasty's own generation dominates, is where engine
+changes show up.
+
 The subtraction is the meaningful result. It includes Tasty's cold style
 generation, cache and injector bookkeeping, rule insertion, and any additional
 style invalidation exposed by that workload's resolution boundary. It does not
@@ -173,11 +197,11 @@ The benchmarks above measure mounting and whole-tree updates. A running
 application spends most of its time on neither. It flips mods — hovered,
 pressed, selected, expanded — on elements whose styles never change, one
 element at a time, and it mounts and unmounts small styled subtrees as menus
-and dialogs open. Both paths go through the state-map and ref-counting
-machinery rather than the parser, so a regression in them is invisible to every
+and dialogs open. Both paths go through mod handling and the chunk cache
+rather than the parser, so a regression in them is invisible to every
 other benchmark here.
 
-[`tasty-interaction.bench.tsx`](../src/tasty-interaction.bench.tsx) pairs each
+[`tasty-interaction.bench.tsx`](https://github.com/tenphi/tasty/blob/main/src/tasty-interaction.bench.tsx) pairs each
 case with a raw-DOM equivalent driven by a hand-written stylesheet that
 produces the same computed color and background in both states. The benchmark
 fails if either arm resolves to anything else, so an arm that quietly rendered
@@ -201,30 +225,37 @@ readable number and noise:
   The browser's side of an interaction is real, but it is the browser's;
   resolution boundaries are what the injection benchmark above measures.
 
-On an Apple M1 Max with React 19.2.8 and Chromium 151, three consecutive runs
-produced these ranges:
+The contract check also reads the injected CSS **before** any toggle and fails
+if the hovered rule is not already there. That a style map's states all ship in
+one chunk on first render is the premise of this case; if the hovered rule
+arrived lazily, the first sample would be timing injection.
 
-| Workload                                            | Raw elements |    Tasty mods |            Extra per unit |
-| --------------------------------------------------- | -----------: | ------------: | ------------------------: |
-| 300 single-element mod toggles in a 100-element tree |   2.4–2.5 ms |    2.9–3.0 ms | 1.6–1.7 us / interaction |
-| 20 mount + unmount cycles of a 200-element subtree   |   7.6–7.7 ms | 12.6–12.7 ms  |   1.22–1.27 us / element |
+On an Apple M3 Pro with React 19.2.8 and Chromium 151, three consecutive runs:
+
+| Workload                                             | Raw elements | Tasty mods |           Extra per unit |
+| ---------------------------------------------------- | -----------: | ---------: | -----------------------: |
+| 300 single-element mod toggles in a 100-element tree |   1.7–1.8 ms | 2.0–2.1 ms | 1.2–1.3 us / interaction |
+| 20 mount + unmount cycles of a 200-element subtree    |   5.2–5.4 ms | 8.3–8.6 ms |   0.77–0.81 us / element |
+
+The absolute columns move several percent with machine load; the delta between
+the arms is the stable quantity, so read that rather than either column.
 
 Two things are worth reading out of this.
 
-A mod flip on an already-mounted element costs about 1.7 us. The CSS for both
+A mod flip on an already-mounted element costs about 1.2 us. The CSS for both
 states already exists — Tasty emits every state of a style map in one chunk on
 first render — so both arms perform the same commit, and what is left is
-Tasty's props and mod handling. That is the same order as the ~1 us empty
+Tasty's props and mod handling. That is the same order as the ~0.5 us empty
 wrapper measured above, which is most of where it comes from.
 
-Subtree churn is not about styling at all. Its ~1.25 us per element sits right
+Subtree churn is not about styling at all. Its ~0.8 us per element sits right
 on the empty-wrapper mount cost, because the styles are already cached:
 reopening a menu re-pays the React wrapper, not the style pipeline.
 
 ## Page-Load Cold Start
 
 Every benchmark above deliberately excludes the network, module compilation and
-the first render. [`scripts/cold-start`](../scripts/cold-start) measures exactly
+the first render. [`scripts/cold-start`](https://github.com/tenphi/tasty/tree/main/scripts/cold-start) measures exactly
 those: what a visitor waits for between requesting a page and seeing styled
 content, in a real Chromium under CDP network and CPU throttling.
 
@@ -245,39 +276,61 @@ rather than counted in animation frames — `requestAnimationFrame` fires before
 paint, so a page that commits fast can reach its second frame with nothing
 painted yet.
 
-The Tasty bundle is built from what the page imports (`tasty`, `configure`,
-`computeStyles`, `tastyDebug`), so it is tree-shaken the way an application's
-would be: 52.0 KB brotli, 186 KB raw. Re-exporting the whole library instead
-adds ~4 KB brotli of code no page here calls, which would inflate the column
-that dominates this result.
-
-On an Apple M1 Max with React 19.2.8 and Chromium 151, first contentful paint:
-
-| Link / CPU            | baseline | runtime | prewarm | Tasty's cost |
-| --------------------- | -------: | ------: | ------: | -----------: |
-| No throttling, 1x     |    44 ms |   56 ms |   56 ms |       +12 ms |
-| Fast 4G, 1x           |   744 ms |  924 ms |  920 ms |      +180 ms |
-| Slow 4G, 1x           |  2764 ms | 3708 ms | 3712 ms |      +944 ms |
-| No throttling, 4x CPU |   156 ms |  204 ms |  204 ms |       +48 ms |
-| Fast 4G, 4x CPU       |   820 ms | 1052 ms | 1048 ms |      +232 ms |
-| Slow 4G, 4x CPU       |  2824 ms | 3836 ms | 3844 ms |     +1012 ms |
+Two things about the payload decide whether this measures a deployment or a
+straw man, so both are enforced rather than assumed:
+
+- **Assets are served brotli-compressed**, the way a static host serves them.
+  The bundle is 51.5 KB on the wire and 180 KB decoded; putting the decoded
+  bytes on a 1.6 Mbps link would add ~700 ms and charge it to Tasty. The run
+  reads `encodedBodySize` back out of resource timing and fails if what
+  crossed the wire is not the compressed size the table reports.
+- **The bundle is built from what the page imports** (`tasty`, `configure`,
+  `computeStyles`, `tastyDebug`), so it is tree-shaken as an application's
+  would be. Re-exporting the whole library adds ~4 KB brotli of code no page
+  here calls.
+
+On an Apple M3 Pro with React 19.2.8 and Chromium 151, first contentful paint,
+median of three full runs of the matrix:
+
+| Link / CPU            | baseline | runtime | prewarm | Tasty's cost | noise |
+| --------------------- | -------: | ------: | ------: | -----------: | ----: |
+| No throttling, 1x     |    36 ms |   40 ms |   40 ms |        +4 ms |  0 ms |
+| Fast 4G, 1x           |   628 ms |  672 ms |  688 ms |       +44 ms | 20 ms |
+| Slow 4G, 1x           |  2044 ms | 2308 ms | 2308 ms |      +264 ms | 24 ms |
+| No throttling, 4x CPU |   112 ms |  144 ms |  144 ms |       +32 ms | 16 ms |
+| Fast 4G, 4x CPU       |   656 ms |  728 ms |  736 ms |       +72 ms |  4 ms |
+| Slow 4G, 4x CPU       |  2064 ms | 2360 ms | 2360 ms |      +296 ms |  8 ms |
+
+The `noise` column is not an estimate. The `baseline` page contains no Tasty at
+all, so its three samples should be identical; the spread they actually show is
+this cell's measurement error, and it applies to the other columns too.
+
+Read that column before any other. Only the Slow 4G rows carry a cost an order
+of magnitude above their own noise. The unthrottled 1x row (+4 ms) means "too
+small to measure this way", not "4 ms". And a single run is genuinely not
+enough here: taken alone, the first of these three runs put Fast 4G 1x at
++72 ms, which the median over three corrects to +44 ms.
+
+For the same reason, `prewarm` landing above `runtime` in the Fast 4G 1x row is
+noise, not a cost — the two modes differ only in when the engine compiles, and
+that difference is measured in the phase table below, not in FCP.
 
 **The cost is the bundle, not the work.** On Slow 4G the extra transfer alone
-accounts for 946 ms of the 944 ms FCP delta — the whole of it, within noise.
-Everything Tasty then *does* is small by comparison:
+accounts for 263 ms of the 264 ms FCP delta — effectively all of it. Everything
+Tasty then *does* is small by comparison (median of three runs):
 
 | Phase (Slow 4G, 1x)     | baseline | runtime | prewarm |
 | ----------------------- | -------: | ------: | ------: |
-| js+css transfer         |  2150 ms | 3096 ms | 3096 ms |
-| module compile (shared) |   1.7 ms |  1.6 ms |  1.5 ms |
-| tasty top-level execute |        — |  0.9 ms |  1.1 ms |
-| `configure()`           |        — |  0.5 ms |  0.4 ms |
-| prewarm                 |        — |       — |  4.7 ms |
-| render 1st component    |   2.0 ms |  6.7 ms |  2.5 ms |
-| render 49 more          |   1.0 ms |  6.0 ms |  5.7 ms |
+| js+css transfer         |  1423 ms | 1686 ms | 1690 ms |
+| module compile (shared) |   3.5 ms |  3.3 ms |  3.0 ms |
+| tasty top-level execute |        — |  1.2 ms |  0.8 ms |
+| `configure()`           |        — |  0.6 ms |  0.4 ms |
+| prewarm                 |        — |       — |  3.3 ms |
+| render 1st component    |   3.0 ms |  7.3 ms |  1.9 ms |
+| render 49 more          |   1.3 ms |  5.2 ms |  3.8 ms |
 
 Importing Tasty costs about 1 ms of top-level execution; `configure()` costs
-half of one. The rest of the CPU delta — under 10 ms for 50 components — is
+half of one. The rest of the CPU delta — about 10 ms for 50 components — is
 generation and injection, which is the cost the injection benchmark isolates.
 
 One asymmetry is worth naming: the control links a render-blocking stylesheet
@@ -287,20 +340,21 @@ delivery models, not a thumb on the scale, but it means the FCP delta is not
 purely "what Tasty costs to execute".
 
 **Prewarming moves the wake-up, it does not remove it.** The first styled render
-is ~4.5 ms more expensive than the ones after it, because that is when the
+is ~5.4 ms more expensive than the ones after it, because that is when the
 engine's deferred payload is actually compiled. A throwaway `computeStyles()`
-against a detached root pays it early: `render 1st` drops from 6.7 ms to
-2.5 ms. The prewarm itself costs 4.7 ms, so FCP does not move. It is worth
-doing only when something else can overlap it, or when the first render is on a
-latency-critical path and the page has idle time before it.
+against a detached root pays it early: `render 1st` drops from 7.3 ms to
+1.9 ms. The prewarm itself costs 3.3 ms, so the work is moved rather than
+removed and FCP does not move. It is worth doing only when something else can
+overlap it, or when the first render is on a latency-critical path and the page
+has idle time before it.
 
 **Retained heap.** After a forced collection, the runtime page holds about
-1,013 KB more than the control (2,626 KB vs 1,613 KB) for 50 components — the
+985 KB more than the control (2,605 KB vs 1,619 KB) for 50 components — the
 parser caches, the chunk cache, the injector's registry and the generated CSS.
 The control is not zero either; most of its 1.6 MB is React and the DOM.
 
 CPU throttling changes which line moves. At 4x, module compilation of the
-larger graph becomes visible (7.4 ms → 26 ms) where at 1x it is free: V8
+larger graph becomes visible (2.6 ms → 19 ms) where at 1x it is free: V8
 pre-parses at import and compiles lazily, so a slower CPU pays for code the
 faster one never fully compiled. Transfer numbers from the unthrottled cells
 are not worth reading — with no emulated link, resource timings are scheduling
@@ -317,16 +371,17 @@ blindly. They describe different paths:
   rule.
 - A genuinely new style pays generation and injection once, then becomes
   reusable.
-- A mod flip on an already-styled element pays neither; it is a class-name
-  change.
+- A mod flip on an already-styled element pays neither; it toggles a `data-*`
+  attribute and the class stays the same.
 - Browser style resolution, layout, and paint depend on the actual document and
   need application-level profiling.
 
 The cold-start measurement is the one that puts the rest in proportion. On a
-slow connection, essentially all of Tasty's page-load cost is transferring the
-library; the generation and injection the microbenchmarks obsess over is ~10 ms
-for 50 components. Bundle size is therefore the lever with the largest effect
-on first paint, and the runtime levers matter for what happens after it.
+slow connection, nearly all of Tasty's page-load cost is transferring the
+library — 263 ms of a 264 ms delta — while the generation and injection the
+microbenchmarks obsess over is ~10 ms for 50 components. Bundle size is
+therefore the lever with the largest effect on first paint, and the runtime
+levers matter for what happens after it.
 
 The practical optimization target is therefore repeated work: keep style input
 stable when possible, reuse generated chunks, and generate CSS at build or