Execution Guide

cd fe-05-css-architecture-and-invalidation/src
npm install
npm run containment    # 1. content-visibility vs contain, initial render (~20s)
npm run invalidation   # 2. how far one change propagates              (~20s)
npm run cascade        # 3. layers vs specificity, behavioural         (~5s)
npm run all

Tuning: CARDS=, ROWS_PER=, MUTATIONS=.

Why Performance.getMetrics rather than performance.now()

Style recalculation and layout happen after your JavaScript returns, inside the rendering steps (fe-01). A performance.now() wrapper around a DOM mutation measures the mutation, not the work it caused. Performance.getMetrics exposes the renderer's own cumulative RecalcStyleDuration and LayoutDuration, so sampling before and after captures what the pipeline actually paid.

Metrics are cumulative, so every measurement is a delta, and each is preceded by a settle step:

await page.evaluate(() => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))));
await page.evaluate(() => document.body.offsetHeight);

Two rAFs to get past the next rendering opportunity, then a forced layout to guarantee it ran. Without this you sample whatever happened to have finished.

Why the invalidation experiment forces layout synchronously

Experiment 2 calls document.body.offsetHeight after every mutation, deliberately committing the fe-01 sin of forced synchronous layout. This pins layout count to 120 in every variant, so the comparison is layout cost, not layout frequency. Without it the browser coalesces differently per variant and the numbers are not comparable.

Read that as a general rule: when comparing cost, hold the count fixed and measure the time; when comparing strategies, measure both.

Reproducibility notes

• Viewport is pinned to 1200×800. content-visibility: auto results depend entirely on how much is offscreen; a different viewport gives different numbers.
• Fresh page per variant.
• Absolute milliseconds vary by machine; the ratios are the finding.
• Headless rendering is not identical to headed rendering for compositing decisions. These experiments measure style and layout, which are less affected — but do not extend the numbers to paint or compositing claims.