I Measured content-visibility: auto on 3,000 Cards

说明与用途

在大型卡片网格中使用 content‑visibility: auto 而不指定正确的 contain‑intrinsic‑size 会导致过度渲染和滚动恢复问题。添加正确的尺寸猜测（≈580 px）将首帧时间降至 38 ms 并保持页面高度。

问题

Using content‑visibility: auto alone on a large grid of product cards caused excessive layout work, rendering many off‑screen cards and breaking scroll restoration.

结果

Variant D (content‑visibility: auto + contain‑intrinsic‑size 580 px) reduced first frame time from 144 ms to 38 ms, cut layout time from 81 ms to 9 ms, and kept page height accurate, while Variant B rendered 444 cards and broke scroll restoration.

工作流

• Insert 3,000 cards via innerHTML
• Measure first frame time (two requestAnimationFrame callbacks)
• Measure layout time via Performance.getMetrics
• Compare variants A–D

证据

At 3,000 cards the first frame dropped from 144 ms to 38 ms in headless Chromium 145

来源

Without contain‑intrinsic‑size, Chromium rendered 444 cards instead of 16, and a 200‑card page got slower

来源

Variant D renders 16 cards at load: the rows on screen plus the ones right next to it. The other 2,984 are skipped.

来源

Variant C and D are within noise of each other on speed. The difference between them shows up later, when someone scrolls.

来源

The trap that bit hardest was scroll restoration.

来源