content-visibility: auto — skip off-screen rendering

<div class="pg">
    <h1 class="pg-title">🎮 content-visibility: auto</h1>
    <p class="pg-sub">
      500 article cards — rendered without <code>content-visibility</code>, then
      with it. The timer runs from DOM insert to first committed paint (double-rAF).
      <strong>Run both buttons</strong> to see the difference.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Run the comparison</div>
      <div class="btn-row">
        <button class="btn bad"     id="btnWithout">▶ Without content-visibility</button>
        <button class="btn primary" id="btnWith">▶ With content-visibility: auto</button>
      </div>
      <p class="hint">
        Run <em>Without</em> first for a baseline, then <em>With</em>. The gap is
        larger on slower CPUs — the property pays off most where users feel lag most.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Render time comparison</div>
      <div class="timing-grid">
        <div class="timing-box">
          <div class="t-label">Without</div>
          <div class="t-val" id="timeWithout">—</div>
          <div class="t-note">Browser paints all 500 cards</div>
        </div>
        <div class="timing-box">
          <div class="t-label">With content-visibility: auto</div>
          <div class="t-val" id="timeWith">—</div>
          <div class="t-note">Off-screen cards skipped</div>
        </div>
      </div>
      <div class="speedup" id="speedup"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> The list</div>
      <div class="counter-row">
        <span id="listStatus">Click a button above to render.</span>
        <span id="listMode" class="pill"></span>
      </div>
      <div class="card-scroll" id="cardList">
        <div style="display:flex;align-items:center;justify-content:center;
                    height:100%;color:var(--muted);font-size:.85rem;">
          Click a button above to generate the list.
        </div>
      </div>
      <p class="hint">
        <strong>Scroll after each run.</strong> With <code>content-visibility: auto</code>
        the DOM is identical — only rendering is deferred per section.
        <code>contain-intrinsic-size: auto 68px</code> gives off-screen cards a
        placeholder height so the scrollbar stays accurate and never jumps.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> The CSS</div>
      <div class="code"><span class="tok-sel">.card-item</span> {
  <span class="tok-prop">padding</span>: <span class="tok-num">12px 16px</span>;
  <span class="tok-prop">border-bottom</span>: <span class="tok-str">1px solid #e2e7f0</span>;
}

<span class="tok-cmt">/* Two lines — that's the whole change */</span>
<span class="tok-sel">.card-item.optimized</span> {
  <span class="tok-prop">content-visibility</span>: <span class="tok-kw">auto</span>;
  <span class="tok-prop">contain-intrinsic-size</span>: <span class="tok-kw">auto</span> <span class="tok-num">68px</span>; <span class="tok-cmt">/* height estimate */</span>
}</div>
    </div>
  </div>

preview

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