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

Описание и применение

Использование content‑visibility: auto без правильного указания contain‑intrinsic‑size приводит к лишнему рендерингу и нарушению восстановления прокрутки. Добавление корректного значения (≈580 px) уменьшает время первого кадра до 38 мс и сохраняет высоту страницы.

Задача

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.

Источник