利用`content-visibility: auto`跳过离屏渲染：浏览器底层渲染跳过（Render Skipping）机制

content-visibility: auto：浏览器底层渲染跳过（Render Skipping）机制

大家好，今天我们来聊聊一个相对较新的 CSS 属性：content-visibility，以及它如何通过底层的渲染跳过（Render Skipping）机制来提升页面性能。

在传统的 Web 开发中，浏览器会渲染页面上所有的元素，即使这些元素不在视口（viewport）内。这无疑会消耗大量的 CPU 和 GPU 资源，尤其是在页面内容非常复杂和庞大的情况下。content-visibility 的出现就是为了解决这个问题，它允许浏览器跳过对离屏内容的渲染，从而大幅提升页面的初始加载速度和渲染性能。

什么是渲染跳过（Render Skipping）？

渲染跳过是一种优化技术，它允许浏览器暂时跳过对页面某些部分的渲染工作。这意味着浏览器不会去构建这些部分的 DOM 树、计算样式、进行布局或绘制。只有当这些部分进入视口时，浏览器才会恢复渲染。

content-visibility 属性就是控制渲染跳过的关键。它允许我们显式地告诉浏览器，哪些内容可以被跳过渲染。

content-visibility 的三种取值

content-visibility 属性有三个主要的可选值：

• visible: 这是默认值，表示元素的内容像平常一样渲染。
• hidden: 类似于 visibility: hidden，元素及其内容不会被渲染，但仍会占据空间。
• auto: 这是最关键的值。当元素不在视口内时，浏览器会跳过对该元素的渲染。当元素进入视口时，浏览器会恢复渲染。

content-visibility: auto 的工作原理

当一个元素设置了 content-visibility: auto 并且不在视口内时，浏览器会执行以下操作：

1. 跳过渲染: 浏览器会跳过对该元素的 DOM 子树的渲染，包括样式计算、布局和绘制。
2. 创建占位符: 浏览器会创建一个近似的占位符来替代该元素。这个占位符会占据与原始元素大致相同的空间，以避免页面布局的剧烈变化。
3. 监听视口变化: 浏览器会持续监听视口的变化。
4. 恢复渲染: 当元素进入视口时，浏览器会恢复对该元素的渲染，并移除占位符。

这种机制有效地减少了初始渲染的工作量，从而加快了页面加载速度。

如何使用 content-visibility: auto

要使用 content-visibility: auto，只需要将其添加到你想跳过渲染的元素上即可。通常，我们会将其应用于页面上的大型、独立的区块，例如文章列表、长表格或图片库。

示例:

假设我们有一个包含大量文章列表的页面：

<div class="article-list">
  <article>
    <h2>Article Title 1</h2>
    <p>Article content 1...</p>
  </article>
  <article>
    <h2>Article Title 2</h2>
    <p>Article content 2...</p>
  </article>
  <!-- 更多文章 -->
  <article>
    <h2>Article Title 100</h2>
    <p>Article content 100...</p>
  </article>
</div>

我们可以使用 content-visibility: auto 来优化这个列表：

.article-list article {
  content-visibility: auto;
}

这样，当文章不在视口内时，浏览器会跳过它们的渲染。当用户滚动页面并将文章带入视口时，浏览器会动态地渲染它们。

contain-intrinsic-size 的作用

在使用 content-visibility: auto 时，经常会和 contain-intrinsic-size 属性一起使用。这是因为当浏览器跳过渲染时，它需要知道该元素所占空间的大小，以便创建合适的占位符。 如果没有指定 contain-intrinsic-size，浏览器可能无法准确地估计元素的大小，导致页面布局出现问题。

contain-intrinsic-size 属性允许我们指定元素在未渲染时应该占据的大小。它接受两个值：宽度和高度。

示例:

.article-list article {
  content-visibility: auto;
  contain-intrinsic-size: 1000px 200px; /* 宽度 1000px，高度 200px */
}

在这个例子中，我们告诉浏览器，每个文章在未渲染时应该占据 1000px 的宽度和 200px 的高度。这个值应该尽可能接近实际渲染后的大小，以减少布局变化。

选择合适的 contain-intrinsic-size 值:

选择合适的 contain-intrinsic-size 值至关重要。你可以通过以下方法来确定：

1. 检查已渲染的元素: 先渲染一个或几个元素，然后使用浏览器的开发者工具来检查它们的大小。
2. 估计大小: 如果元素的大小变化不大，你可以使用一个平均值。
3. 使用 CSS 函数: 可以使用 calc() 函数来根据其他元素的尺寸计算出 contain-intrinsic-size。
4. 媒体查询: 针对不同的屏幕尺寸使用不同的 contain-intrinsic-size。

不使用 contain-intrinsic-size 的情况:

在某些情况下，你可能不需要使用 contain-intrinsic-size。例如，如果元素具有固定的高度和宽度，或者它的父元素已经限制了它的大小。

content-visibility 与 contain 属性

content-visibility 属性实际上依赖于 contain 属性。contain 属性允许我们告诉浏览器，一个元素的内容与其他元素之间的依赖关系。 通过使用 contain 属性，我们可以让浏览器更好地优化渲染过程。

contain 属性可以接受多个值，每个值对应不同的优化策略。与 content-visibility 相关的 contain 值是 layout、paint 和 size。

• contain: layout: 告诉浏览器，该元素的布局不会影响到其他元素。
• contain: paint: 告诉浏览器，该元素的绘制不会影响到其他元素。
• contain: size: 告诉浏览器，该元素的大小不会影响到其他元素。

当设置 content-visibility: auto 时，浏览器会自动应用 contain: layout paint size。这意味着浏览器会认为该元素的布局、绘制和大小都不会影响到其他元素。

content-visibility 的优势和局限性

优势:

• 提升初始加载速度: 通过跳过对离屏内容的渲染，可以显著减少初始渲染的时间。
• 降低内存消耗: 减少渲染的工作量可以降低浏览器的内存消耗。
• 改善滚动性能: 通过减少需要渲染的元素数量，可以提高滚动的流畅度。
• 提高网站的 Core Web Vitals 指标: 尤其是 LCP (Largest Contentful Paint) 指标，由于首屏渲染速度加快，该指标通常会得到改善。

局限性:

• 可能导致布局变化: 如果 contain-intrinsic-size 设置不当，可能会导致页面布局出现问题。
• 需要权衡: 需要仔细权衡哪些元素应该使用 content-visibility: auto，哪些元素不应该使用。过度使用可能会导致性能下降。
• 不适用于所有场景: 对于非常小的元素或者需要频繁更新的元素，使用 content-visibility: auto 可能不会带来明显的性能提升，反而会增加额外的开销。
• 浏览器兼容性: 虽然现代浏览器都支持 content-visibility，但旧版本的浏览器可能不支持。你需要考虑兼容性问题。

性能测试与数据分析

为了验证 content-visibility: auto 的性能提升效果，我们需要进行性能测试和数据分析。可以使用浏览器的开发者工具来测量页面加载时间和渲染时间。

测试步骤:

1. 创建测试页面: 创建一个包含大量内容的测试页面，例如长文章或图片库。
2. 不使用 content-visibility: 首先，在不使用 content-visibility 的情况下加载页面，并记录页面加载时间和渲染时间。
3. 使用 content-visibility: 然后，将 content-visibility: auto 应用于页面上的某些元素，并再次加载页面，记录页面加载时间和渲染时间。
4. 比较数据: 比较两次测试的结果，看看 content-visibility 是否带来了性能提升。

性能指标:

我们需要关注以下性能指标：

• First Contentful Paint (FCP): 浏览器首次渲染任何内容的时刻。
• Largest Contentful Paint (LCP): 浏览器渲染页面上最大的可见元素的时间。
• Time to Interactive (TTI): 页面变得完全可交互的时间。
• Total Blocking Time (TBT): 页面阻塞用户交互的总时间。
• CPU 使用率: 页面加载和渲染过程中 CPU 的使用情况。
• 内存使用率: 页面加载和渲染过程中内存的使用情况。

通过比较这些指标，我们可以更全面地了解 content-visibility 对页面性能的影响。

代码示例：优化长列表

这是一个更完整的例子，展示了如何使用 content-visibility: auto 和 contain-intrinsic-size 来优化一个长列表：

<!DOCTYPE html>
<html>
<head>
<title>Content Visibility Example</title>
<style>
  .list-container {
    width: 80%;
    margin: 0 auto;
  }

  .list-item {
    content-visibility: auto;
    contain-intrinsic-size: 800px 150px; /* 假设每个列表项的平均大小 */
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
  }

  .list-item h2 {
    font-size: 1.2em;
    margin-bottom: 5px;
  }

  .list-item p {
    font-size: 1em;
    line-height: 1.4;
  }
</style>
</head>
<body>

<div class="list-container">
  <h1>Long List Example</h1>
  <div class="list-item">
    <h2>Item 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
  </div>
  <div class="list-item">
    <h2>Item 2</h2>
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...</p>
  </div>
  <!-- 更多列表项 -->
  <div class="list-item">
    <h2>Item 100</h2>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. ...</p>
  </div>
</div>

</body>
</html>

在这个例子中，我们将 content-visibility: auto 应用于每个列表项（.list-item）。同时，我们使用 contain-intrinsic-size 来指定每个列表项在未渲染时应该占据的大小。这样，浏览器就可以跳过对离屏列表项的渲染，从而提高页面加载速度。

实际应用场景

content-visibility: auto 在以下场景中特别有用：

• 长列表: 包含大量列表项的页面，例如文章列表、产品列表或评论列表。
• 图片库: 包含大量图片的页面。
• 长文章: 包含大量文本和图片的页面。
• 无限滚动页面: 动态加载更多内容的页面。
• 复杂表格: 包含大量数据和复杂样式的表格。

在这些场景中，使用 content-visibility: auto 可以显著减少初始渲染的工作量，从而提高页面性能。

总结： content-visibility: auto 是优化渲染的利器

content-visibility: auto 是一个强大的 CSS 属性，可以通过跳过对离屏内容的渲染来提升页面性能。 它依赖于浏览器底层的渲染跳过机制，并与 contain 和 contain-intrinsic-size 属性密切相关。 通过合理地使用 content-visibility: auto，我们可以显著减少初始渲染的时间，降低内存消耗，并改善滚动性能。

更多IT精英技术系列讲座，到智猿学院