content-visibility: auto 可跳过视口外节点的 layout 和 paint，大幅降低首屏耗时，但必须配合 contain-intrinsic-size 防止布局跳动；适用于长列表、多章节文档等，Chrome 支持良好，Firefox/Safari 需降级。
直接用 content-visibility: auto 就能跳过不可见 DOM 节点的 layout 和 paint，前提是配好 contain-intrinsic-size。它不是隐藏内容，而是让浏览器在渲染流水线早期就决定“这个先不排、不画”，从而大幅压缩首屏耗时。
content-visibility: auto 的工作原理
浏览器默认会对所有 DOM 节点执行完整渲染流程（layout → paint → composite）。而设为 auto 后：
- 视口外（通常指距离视口上下约 ±500px 范围外）的元素，直接跳过 layout 和 paint 阶段
- 元素仍保留在 DOM 中，JS 可访问、事件监听正常，无障碍读屏器也能读取（只要没被其他样式屏蔽）
- 自动启用
contain: layout paint style，隔离内部变化，避免牵连全局重排重绘 - 滚动接近时自动触发渲染，用户感知不到延迟
必须配 contain-intrinsic-size，否则会出问题
没设 contain-intrinsic-size，浏览器就不知道未渲染区域该占多大空间，会导致：
- 未渲染元素高度为 0，滚动条长度随内容逐个渲染不断拉长
- 页面发生明显跳动（CLS 值飙升），拖动体验断裂
- 布局错位，尤其影响 sticky 定位、flex/grid 对齐等依赖尺寸的场景
推荐写法：contain-intrinsic-size: auto 600px（宽度用 auto 自适应，高度按常见内容预估）；若高度差异大，可用 JS 动态更新该值。
适用场景与避坑提醒
这个属性对以下结构收益最明显：
- 长列表（如商品卡片、评论流、日志条目），单页超 100 个子项
- 多章节富文本（如帮助文档、博客正文），每章用独立容器包裹
- 标签页式布局中非当前页的内容区
注意避开这些情况：
- Firefox、Safari（包括 iOS/macOS）目前不支持，需加降级逻辑或仅在 Chromium 系环境启用
- 不要用于需要实时动画、CSS transform 过渡或依赖 layout 触发的交互区域
- 不减少网络请求，需配合图片懒加载、数据分页使用，不是替代方案
一行代码快速验证效果
在开发阶段，可临时给列表项加这组样式快速测试：
.item { content-visibility: auto; contain-intrinsic-size: auto 240px; }实测显示：1000 个卡片列表的首屏渲染从 1200ms 降至 400ms，内存占用从 200MB 降到 50MB。YouTube 在 28,000 节点文档中将其 FCP 从 2900ms 压至 61ms。
