CSS content-visibility 怎样延迟长列表的渲染成本

长列表卡顿时，先不要把所有项目都当成首屏内容。将每个列表项设置为 content-visibility: auto，浏览器可以跳过视口外项目的部分布局和绘制工作；再用 contain-intrinsic-size 给未渲染项目一个合理的占位高度，滚动条就不会因为项目刚进入视口而大幅跳动。

适合延迟渲染的是“仍在文档中、但暂时离开视口”的内容。列表项要有可估算的尺寸，并且不要把需要立即查找、聚焦或交互的内容误设为 hidden。

一、先把长列表切成独立渲染边界

不要把属性加在整个列表容器上，而是加在重复的项目节点上。这样浏览器可以把每个项目当成一个较小的包含边界，首屏只优先处理视口附近的卡片。

    
文章标题
    
摘要和标签内容。
  
  

.article-card {
  /* 只跳过离开视口的列表项，保留它在文档中的位置 */
  content-visibility: auto;
  /* 用常见卡片高度作为未渲染时的布局估算 */
  contain-intrinsic-size: auto 280px;
}

这里的 auto 不是删除节点，也不是永久隐藏。元素接近用户可见范围时，浏览器会恢复内容的渲染；离开范围后，浏览器可以再次跳过这部分成本。

二、用估算尺寸稳定滚动位置

开启跳过渲染后，浏览器仍要先知道项目大概占多高，否则未渲染内容可能被当作没有子内容，用户滚动时就会看到滚动条长度或位置突然变化。contain-intrinsic-size: auto 280px 的含义是：第一次需要展示前先按 280px 估算，真正渲染过后可记住实际尺寸。

.article-card {
  /* 估算值应接近多数卡片，不能随意写成极大高度 */
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
  margin-block: 12px;
}

.article-card--wide {
  /* 明显更高的项目使用另一组估算，减少进入视口时的重排 */
  contain-intrinsic-size: auto 520px;
}

估算值不是视觉高度的硬编码。图片、异步摘要或展开区会改变真实高度，所以应按历史内容取一个接近中位数的值；如果项目高度差异很大，可以按类型拆分 class，而不是用一个极端值覆盖全部项目。

三、不要把 auto、hidden 和 visible 混为一谈

visible 是默认值，内容按普通方式布局和绘制；auto 允许浏览器对视口外内容跳过渲染，但内容仍在 DOM 和辅助技术可访问范围内；hidden 则明确跳过内容，不能用于需要被查找、聚焦或选择的列表项。

因此，普通文章列表优先从 auto 开始；如果卡片里有键盘焦点、查找定位、读屏阅读或用户会立刻操作的控件，不要为了“更快”改成 hidden。

四、兼容写法与排查顺序

现代浏览器已普遍支持这一能力，但项目仍应让不支持它的浏览器按普通 CSS 工作。直接写属性即可自然降级；不要用脚本删除列表项来模拟它。

.article-card {
  /* 不支持 content-visibility 时，这条规则被忽略，仍按普通方式渲染 */
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

@supports not (content-visibility: auto) {
  .article-card {
    /* 回退只保留普通布局，避免破坏查找、焦点和滚动语义 */
    content-visibility: visible;
  }
}

如果页面仍然抖动，先检查四件事：估算高度是否偏离实际值；图片是否没有预留尺寸；列表项是否在进入视口时改变了字体或展开状态；是否把属性加在了包含所有项目的父容器上。最后再考虑是否需要虚拟列表，因为 content-visibility 只延迟渲染成本，不会减少 DOM 数量。

常见问题

content-visibility: auto 会不会让搜索不到列表内容？

与 hidden 不同，auto 的跳过内容仍可被用户代理用于查找、焦点和选择；真正的问题通常是项目自身被脚本移出 DOM，或使用了额外的隐藏规则。

contain-intrinsic-size 应该写多大？

从常见列表项的实际高度估一个接近中位数的值，并按卡片类型拆分。值越离谱，进入视口时越容易发生明显的布局修正。