Execution Guide

cd fe-06-layout/src
npm install
npm run modes      # 1. six layout modes over 20,000 items   (~30s)
npm run sizing     # 2. intrinsic sizing + container queries (~30s)
npm run all

Tuning: ITEMS=.

Method notes

• Performance.getMetrics deltas, as in fe-05, with a two-rAF + forced-offsetHeight settle before each sample. Style/layout happen after your JS returns; a performance.now() wrapper cannot see them.
• Fresh page per variant.
• Viewport pinned to 1200×800. Layout results depend on available width.
• The relayout measurement sets wrap.style.width and forces layout synchronously, so every variant performs the same number of layouts and the comparison is cost, not frequency.
• The absolute-positioning variant is deliberately realistic: per-element inline left/top, which is how absolute layouts are actually built. Its elevated style cost (27.7 ms) is part of the technique, not an artefact — but it is worth knowing which part of the number that is.
• The container-query behavioural check narrows the container while leaving the viewport at 1200 px, then reads getComputedStyle. That is the whole experiment: the media-query variant is unable to notice.

Reproducibility

Absolute milliseconds are machine-specific; ratios and orderings are the findings. The 1.4× spread in experiment 1 is the point — if you measure 3× or 1.05×, the conclusion (mode is not where layout cost lives) is unchanged, and the comparison against fe-05's 98% is what carries it.