content-visibility

定义

content-visibility 是基于 CSS Containment 的渲染优化属性，取值 auto 时，浏览器可以完全跳过视口外元素的样式计算、布局与绘制，等元素接近可视区域时再执行，从而大幅缩短长页面的初始渲染时间。

取值

• visible：默认，正常渲染；
• hidden：跳过渲染但保留状态，类似可快速恢复的 display: none；
• auto：由浏览器按与视口的相关性决定是否渲染，同时元素仍可被查找与聚焦。

配套属性

跳过渲染的元素尺寸未知，会导致滚动条跳动，因此通常配合 contain-intrinsic-size 提供占位尺寸，例如： ``css section { content-visibility: auto; contain-intrinsic-size: auto 500px; } ``

应用与限制

适用于长文章、评论区、商品流等内容自上而下排列的页面；对依赖精确滚动位置或全文测量的场景需谨慎。与虚拟滚动相比，它由浏览器原生调度，无需改动 DOM 结构。