Layout thrashing — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Layout thrashing: read-write loops vs batched</h1>
    <p class="pg-sub">
      Both buttons below do the exact same visual thing: expand every row in the list.
      One reads <code>scrollHeight</code> and writes <code>style.height</code> for each row,
      one row at a time. The other reads every <code>scrollHeight</code> first, then writes
      every <code>style.height</code>. Time both — the browser's own clock tells you which one
      is <strong>layout thrashing</strong>.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Setup</div>
      <div class="wrap-controls">
        <div class="field">
          <label class="label" for="rowCount">Rows (<span id="rowCountLabel">400</span>)</label>
          <input type="range" id="rowCount" min="50" max="1000" step="50" value="400" />
        </div>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="50">Small list (50 rows)</button>
        <button class="btn sm" data-preset="1000">Big list (1000 rows)</button>
      </div>
      <p class="hint">
        More rows means more forced layouts for the naive version — the batched version barely
        notices, because it only ever forces one.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Run it</div>
      <div class="btn-row">
        <button class="btn bad" id="runNaive">Expand all — naive (read+write per row)</button>
        <button class="btn good" id="runBatched">Expand all — batched (read all, then write all)</button>
        <button class="btn ghost" id="collapse">Collapse all</button>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Pick a run — both expand the same list below.</span>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> Result</div>
      <div class="compare">
        <div class="card">
          <div class="k">Naive (interleaved read/write)</div>
          <div class="big-num" id="naiveTime">—</div>
        </div>
        <div class="card">
          <div class="k">Batched (read all, then write all)</div>
          <div class="big-num" id="batchedTime">—</div>
        </div>
      </div>
      <div class="banner info show" id="diffBanner" style="margin-top:12px">
        Run both at least once to see the difference, measured live in your own browser.
      </div>
      <p class="hint">
        Open your browser's performance profiler, click "naive," and look for the purple
        "Forced reflow" bars — one per row. The batched run won't have them.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.