CSS containment 和 content-visibility 如何优化渲染性能？

简化版

CSS containment 通过 contain 告诉浏览器某个区域的布局、绘制或样式影响不会扩散到外部，从而减少重排和重绘范围。content-visibility: auto 可以让浏览器跳过屏幕外内容的渲染工作，等内容接近视口时再渲染。它们适合长列表、卡片流、折叠区域和复杂后台页面，但要注意可访问性、搜索、锚点定位和占位尺寸。

详细版

这类优化的本质是缩小浏览器工作范围。浏览器默认要考虑元素之间可能互相影响，contain 和 content-visibility 给浏览器更多边界信息。

属性	作用	常见场景
`contain: layout`	限制布局影响范围	独立卡片、组件容器
`contain: paint`	限制绘制溢出	独立模块、复杂面板
`contain: size`	尺寸不依赖子元素	固定尺寸容器
`content-visibility: auto`	跳过屏幕外内容渲染	长页面、列表、文档

.card {
  contain: layout paint;
}

.section {
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}

这不是替代虚拟列表的银弹，更像是把浏览器渲染成本控制在更小区域。

完整版教学

一、浏览器为什么需要边界提示

浏览器布局时需要计算元素尺寸和位置。如果一个元素变化可能影响全页面，浏览器就要扩大计算范围。复杂页面中，局部变化引发大范围布局和绘制，会造成明显卡顿。

CSS containment 的思路是让开发者告诉浏览器：这个区域相对独立，它内部变化不会影响外部，浏览器可以少算一些。

二、contain 的几个维度

contain 可以拆成多个维度：

layout：内部布局变化不影响外部布局。
paint：绘制限制在元素边界内。
size：元素尺寸不依赖内部内容。
style：样式计数器等影响受限。

实际项目里常见写法是 contain: layout paint;，比直接 contain: strict 更安全，因为 strict 包含尺寸隔离，容易让自适应内容出问题。

三、content-visibility 的价值

content-visibility: auto 允许浏览器跳过屏幕外内容的布局和绘制。对于长文档、商品列表、后台配置页特别有用。

如果不用占位尺寸，浏览器可能不知道屏幕外区域大概多高，滚动条和锚点体验会不稳定。因此通常配合 contain-intrinsic-size。

.article-block {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

四、和虚拟列表有什么区别

虚拟列表是应用层只渲染可视区域 DOM；content-visibility 是浏览器层跳过不可见内容渲染。

对比	虚拟列表	content-visibility
DOM 数量	减少 DOM	DOM 仍存在
实现复杂度	较高	较低
适用	超长列表、海量数据	长页面、模块化内容
风险	滚动定位、动态高度	兼容性、占位尺寸

五、适用场景

它适合内容块之间相对独立的页面。例如文档站的章节、后台配置面板、商品卡片区、评论区和折叠区域。

不适合强依赖全局布局的区域，也不适合尺寸必须由内容自然撑开的关键首屏模块。

六、注意副作用

contain 改变浏览器对布局影响范围的判断，可能影响 position: sticky、百分比尺寸、溢出绘制和锚点定位。

content-visibility 虽然能跳过渲染，但 DOM 仍然存在，所以不能解决超大 DOM 带来的所有内存问题。海量列表仍可能需要虚拟列表。

七、常见误区与追问

误区：content-visibility 可以替代所有懒加载。 它主要跳过渲染工作，资源请求和 DOM 内存仍要结合具体情况处理。
误区：contain 越严格越好。 过度使用 size 或 strict 可能破坏自适应布局。
误区：加上这些属性一定变快。 只有页面存在大量屏幕外渲染或局部变化扩散时收益才明显。
追问：为什么要配 contain-intrinsic-size？ 它给屏幕外内容提供预估尺寸，减少滚动条跳动和布局不稳定。
追问：它和虚拟列表怎么选？ 海量同构列表优先虚拟列表，长页面模块可先尝试 content-visibility。
追问：首屏区域适合用吗？ 首屏核心内容通常不适合跳过渲染，非首屏模块更合适。

八、加强记忆

把 containment 记成“告诉浏览器这里是边界”，把 content-visibility 记成“屏幕外先别算”。它们的价值是减少布局和绘制范围，但不能替代数据分页、虚拟列表和资源懒加载。

简化版

详细版