Step 1 — Does Layout Mode Matter?

Goal

Test a widely-repeated performance claim, and calibrate where layout cost actually lives.

Predict first

20,000 items, identical content and identical visual result, laid out six ways: block, inline-block, float, flex, grid, absolute.

Rank them by initial layout time, and predict the spread between fastest and slowest. Most engineers predict flex/grid slowest and absolute fastest, with a large spread. Commit.

Run

cd src && npm install && npm run modes

Expected output:

  mode         | initial layout | initial style | relayout (width change)
  block        |    55.1ms      |    11.7ms     |    23.5ms
  inlineBlock  |    55.7ms      |    11.3ms     |     9.5ms
  float        |    75.2ms      |    11.0ms     |    36.2ms
  flex         |    59.3ms      |    11.3ms     |     7.3ms
  grid         |    62.5ms      |    10.5ms     |    14.7ms
  absolute     |    75.5ms      |    27.7ms     |     9.8ms

  spread across all six modes: 1.4x   (fastest: block, slowest: absolute)

What just happened

1.4× across every layout mode. Flex and grid are within noise of block. And the two modes most often recommended for performance — absolute and float — were the two slowest.

Absolute positioning carried 2.4× the style cost (27.7 ms vs ~11 ms). That is the per-element inline left/top: inline styles skip selector matching but still require per-element value computation, and they defeat computed-style sharing between identical elements.

But absolute relayouts well (9.8 ms vs block's 23.5 ms), because out-of-flow boxes do not shift their siblings. A technique can be worse on one axis and better on another; folklore usually remembers one.

Flex was fastest on relayout — 7.3 ms, 3.2× better than block.

The calibration that matters

Layout mode is a rounding error. Choose it for expressiveness: grid for two-dimensional relationships, flex for one-dimensional distribution, block for flow. A layout needing no wrapper divs and no magic numbers beats a "faster" one that needs both.

Checkpoint

docs/verification.md Checkpoints 1 and 2. Log the correction if you predicted otherwise — this is the third Phase-1 module where confident folklore failed measurement.