CSS content-visibility 渲染性能
content-visibility:auto(跳过离屏元素渲染)/visible/hidden、contain-intrinsic-size防止滚动条跳动、大幅提升长列表渲染性能、与contain属性关系 · 难度：入门 · +10XP
CSS content-visibility —— 页面渲染性能翻倍
如果页面有几百个列表项，浏览器渲染起来会很慢。content-visibility:auto让浏览器跳过屏幕外元素的渲染，大幅提升性能。
基本用法
.list-item {
content-visibility: auto; /* 自动跳过离屏元素 */
contain-intrinsic-size: 0 200px; /* 预估元素大小防滚动条跳动 */
}三个值
| 值 | 效果 |
|---|---|
| visible | 正常渲染（默认） |
| auto | 进入视口才渲染（推荐） |
| hidden | 完全跳过渲染（配合JS控制） |
性能收益
在1000行的长列表中，content-visibility:auto可以让首次渲染时间减少90%以上。
动手练习
- 基础练习：做一个500条数据的长列表，用content-visibility:auto优化，用DevTools Performance面板对比前后渲染时间。
- 进阶应用：用contain-intrinsic-size精确预估每项高度，消除滚动条跳动。
- 项目实战：在你项目的列表/卡片/评论区等长内容区域启用content-visibility。