你是否经历过加载一个内容丰富的网页时，页面加载速度异常缓慢？这是因为浏览器需要一次性处理所有内容，即使这些内容在当前视图中不可见。这时，CSS 的 content-visibility 属性就能发挥巨大的作用。它允许浏览器推迟渲染屏幕外的内容，从而显著提升页面的加载速度。
什么是 CSS 包含？
在深入了解 content-visibility 之前，我们先来了解一下 CSS 包含（Containment）。CSS 包含是一种机制，允许开发者告诉浏览器页面的哪些部分是独立的，与其他部分无关。当浏览器知道这一点后，它可以更高效地渲染这些独立的部分，而无需对整个页面进行复杂的计算。
CSS 包含就像将内容放入一个个独立的盒子中。每个盒子的内容都不会影响其他盒子，浏览器可以独立处理每个盒子，从而提高渲染效率。
content-visibility 是如何工作的？
content-visibility 属性告诉浏览器可以跳过渲染用户当前看不到的内容。这大大节省了处理时间，因为浏览器无需为屏幕外的元素计算样式、布局和绘制。
当用户滚动页面，内容进入视图时，浏览器会及时渲染这些内容。这种方式使得初始页面加载速度更快，尤其是对于内容丰富且较长的页面。
content-visibility 属性的值
content-visibility 属性主要有三个值：
visible：默认行为。内容按正常方式处理和显示。hidden：内容不显示且对用户不可访问（类似于display: none），但保留其渲染状态，以便稍后快速取消隐藏。auto：只有在内容接近或进入视口时才进行渲染。这是性能优化的最佳选择。
何时使用 content-visibility？
content-visibility 最适合以下场景：
初始视图外的内容：例如，页面首次加载时不可见的内容。 自包含的内容：这些内容不影响页面的其他部分，例如不会改变布局或影响其他元素的样式。 渲染成本较高的内容：例如，复杂的布局、长列表的 UI 组件、新闻源中的博客文章、长评论线程等。
何时不应使用 content-visibility？
在使用 content-visibility 时，需要注意其可能带来的意外后果。以下是一些不适用的场景：
初始视口内的内容：这些内容是用户首先看到的部分，延迟加载可能会导致用户体验不佳。 渲染成本较低的小元素：避免过度优化，仅在真正有效时使用 content-visibility。对页面布局影响较大的元素：延迟渲染这些元素可能会导致内容渲染时出现意外结果。
使用 contain-intrinsic-size
当你使用 content-visibility: auto 时，浏览器可能会面临一个问题：它不知道延迟渲染的内容有多大。在这种情况下，浏览器可能会假设高度为 0，从而导致滚动条状态出现异常。
这时，contain-intrinsic-size 属性就派上了用场。它允许你为内容指定一个占位符大小，从而避免布局的突然变化：
.content-section {
content-visibility: auto;
contain-intrinsic-size: auto 600px; /* 宽度和高度占位符 */
}
选择性地应用 content-visibility
对于长内容列表，可以有选择性地应用 content-visibility: auto。例如，对于博客文章列表：
/* 应用于第 10 篇及之后的帖子 */
.blog-post:nth-child(n + 10) {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
这种方式确保了前几篇帖子按正常方式渲染，而后续帖子则通过 content-visibility: auto 进行优化。
理解 contain 属性
content-visibility: auto 实际上应用了多种类型的包含：
样式包含：防止元素内部的样式影响外部元素。 布局包含：防止内部布局变化影响外部布局。 绘制包含：防止内容从视觉上溢出元素。
你也可以直接使用这些包含类型与 contain 属性：
.container {
contain: style layout paint;
}
提示：在使用 content-visibility: auto 之前，务必理解每种包含类型及其对内容渲染的影响。不要盲目使用，以免带来意外问题。
浏览器支持
content-visibility 属性在所有现代浏览器中都得到了支持，包括 Chrome、Firefox、Safari 和 Edge。然而，Firefox 和 Safari 在某些值的表现上可能会有些许差异。
contain 属性在现代浏览器中也具有良好的支持。
使用 DebugBear 测量改进
在 DebugBear，我们提供了工具来衡量 CSS 包含对网站性能的影响。以下是一个示例：
假设一个页面上有数百篇博客文章，其 DOM 树可能如下所示：
通过为某些元素添加 content-visibility 属性，我们可以优化页面的渲染性能：
.apply-content-visibility {
content-visibility: auto;
contain-intrinsic-size: auto 300px;
}
通过切换 .apply-content-visibility 类的样式，我们可以创建一个前后对比，以了解 content-visibility 对页面加载期间渲染性能的影响。以下是在 DebugBear 仪表板中设置的两个测试：
通过 比较视图，我们可以直观地看到性能改进：
在上述截图中，我们可以看到测试页面性能指标的前后对比。CPU（绘制）时间显著下降，因为页面上有数百篇博客文章，无需立即渲染。有趣的是，最大内容绘制（LCP） 指标也得到了改善。由于浏览器可以专注于首先渲染最重要的内容——LCP 元素，页面的整体性能得到了提升。
DebugBear 还提供了一个视频比较功能，让你直观地看到这些变化的视觉影响：
您的浏览器不支持 video 标签。虽然为演示页面创建多个 DebugBear 测试在某种程度上是有用的，但更实际的做法是使用 DebugBear 的 一键实验 功能来测试 content-visibility 对你网站性能的影响。
DebugBear 的 博客列表页面 是一个理想的测试对象。截至 2025 年 3 月，该页面上有近 200 篇文章，每篇都包含标题和摘要。通过将 /blog 页面添加为新的测试，并配置为使用 移动配置 进行测试，我们可以运行一个基线测试，捕获未优化的页面加载性能。
接下来，我们创建并配置了一个新实验：
在这个实验中，我们在页面的 <head> 中插入了一段 CSS：
<style>
/* 延迟渲染第 11 篇及之后的文章 */
[itemprop="blogPost"]:nth-child(n+11) {
content-visibility: auto;
contain-intrinsic-size: auto 300px;
}
</style>
实验结果显示，虽然一些指标的改进可能微不足道，但在 CPU 绑定的样式、布局和绘制指标方面有显著提升，这些指标是衡量 content-visibility 带来性能益处的良好指标。
可访问性考虑
content-visibility 属性可能对可访问性产生影响。这是一个重要的主题，建议阅读 MDN 官方文档 以了解更多相关信息。
结论
content-visibility 属性为开发者提供了更强大的控制浏览器渲染内容的能力。通过告诉浏览器跳过渲染屏幕外的内容，你可以显著提升页面的加载速度和交互性能。
请记住以下关键点：
对于屏幕外的内容，使用 content-visibility: auto，但在应用之前务必测试其性能影响。结合 contain-intrinsic-size使用，以管理尚未渲染的内容的占位符大小。选择性地应用此技术，避免延迟渲染重要内容。 在各种浏览器中手动测试你的更改，使用浏览器 DevTools 和 DebugBear 等工具，并与真实用户一起测试。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
