content-visibility

content-visibility 用来控制元素内容是否需要渲染。

最常用的是 content-visibility: auto，浏览器可以先跳过屏幕外内容的布局和绘制，等滚动到附近再渲染。

适合长列表、大量卡片、大段文章这种首屏外内容很多的页面。

取值

使用 content-visibility: auto 时，如果内容还没渲染，浏览器可能不知道它真实高度，滚动条就容易抖动。

一般会配合 contain-intrinsic-size 给一个预估尺寸。

.list-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}

auto 240px 的意思是：先用 240px 占位，元素真正渲染过后，浏览器可以记住它的真实尺寸。