CSS 也能做“按需渲染”？content-visibility 实战指南

先上一段让你滚动时卡成 PPT 的长列表代码：

<ul>
    <li>第 1 条数据</li>
    <li>第 2 条数据</li>
    <!-- ... 10000 条 -->
    <li>第 10000 条数据</li>
</ul>

10000 个 DOM 节点一次性渲染，页面加载时卡死 3 秒，滚动时掉帧。你试过虚拟列表，但实现复杂度上来了；你试过分页加载，但产品要的是无限滚动。

content-visibility: auto 一行 CSS 让浏览器跳过不可见区域的渲染：

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

滚动到哪，渲染到哪，DOM 节点还在，但渲染工作被推迟了。今天把 content-visibility 的原理和使用方式一次讲清楚。

0. 先搞清楚 content-visibility 是什么

content-visibility 是 CSS 属性，告诉浏览器“这个元素的内容如果不在视口里，就先别渲染它”。

默认行为：所有 DOM 都渲染 → 页面卡死
content-visibility: auto：只渲染可见区域 → 流畅滚动

display: none 会让元素退出布局；content-visibility: hidden 主要是跳过内容渲染，两者语义不同。

1. 基础用法

/* 每个列表项启用 content-visibility */
.list-item {
    content-visibility: auto;
}

contain-intrinsic-size：让滚动条不跳

content-visibility: auto 跳过了不可见元素的渲染，浏览器不知道它们有多高，滚动条会乱跳。

.list-item {
    content-visibility: auto;
    contain-intrinsic-size: 0 200px;  /* inline 轴 0，占位高度 200px */
}

contain-intrinsic-size 告诉浏览器每个元素大概多高，滚动条先按这个高度占位，等元素真正渲染时再调整。200px 是估计值，实际渲染后会自动修正；估值越接近真实高度，滚动越稳定。

2. 实战场景

场景一：长列表渲染加速

.user-item {
    content-visibility: auto;
    contain-intrinsic-size: 0 80px;
}

场景二：评论列表

.comment-item {
    content-visibility: auto;
    contain-intrinsic-size: 0 120px;
}

场景三：图片瀑布流

.image-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 300px;
}

3. 三个容易踩的坑

坑一：contain-intrinsic-size 估计值不准

估计值跟实际高度差太远，滚动条会跳动。给一个接近平均高度的值。

坑二：依赖精确尺寸的逻辑可能拿到“占位尺寸”

在元素尚未真正渲染前，页面先用 contain-intrinsic-size 占位。此时如果你的逻辑依赖精确尺寸（如滚动定位、锚点计算、JS 读尺寸），可能出现偏差。解决思路是：给更接近真实值的占位尺寸，或在元素进入视口并完成渲染后再做测量。

坑三：content-visibility: hidden 不适合可交互内容

hidden 更适合临时跳过渲染的静态区块，不适合需要立即可交互或可访问的内容。实际项目优先用 auto；同时要理解：它不会删除 DOM，但 SEO/可访问性效果仍取决于具体爬虫与辅助技术实现。

4. 性能提升数据

根据不同场景和硬件条件，性能收益差异很大：

关键是：减少了不可见区域的渲染开销，越复杂的内容收益越明显。

5. 兼容性

• ‎Chromium 系浏览器支持成熟（Chrome/Edge 85+）
• ‎Firefox / Safari 请按目标版本实测（建议上线前看 Can I Use 或 @supports）
• ‎建议做渐进增强：支持就用，不支持也不影响功能

小结

• ‎content-visibility 是长列表的天然性能优化：告诉浏览器“不在视口就不渲染”
• ‎auto 最佳实践：content-visibility: auto + contain-intrinsic-size: 0 预估高度
• ‎滚动条不跳：用 contain-intrinsic-size 给每个元素一个估算高度
• ‎最适合的场景：长列表、评论列表、瀑布流、无限滚动
• ‎性能收益：通常可观，但强依赖内容复杂度和设备性能，建议用 Performance 面板实测
• ‎用 auto 通常更安全；hidden 只用于你明确要跳过渲染的静态区块
• ‎兼容性：Chromium 支持成熟，Firefox/Safari 请按目标版本验证

一句话：content-visibility: auto 是长列表的低成本性能优化，能显著减少视口外内容的渲染负担；但它不是虚拟列表的等价替代，超大数据量场景仍要结合分页/虚拟化方案。