content-visibility

该 content-visibility 属性在Chromium 85中启动，可能是影响页面加载性能的最具影响力的新CSS属性之一。content-visibility使用户代理可以跳过元素的渲染工作，包括布局和绘画，直到需要它为止。因为跳过了渲染，所以如果大部分内容不在屏幕上，则利用该content-visibility属性可使初始用户加载更快。它还允许与屏幕上的内容进行更快的交互。漂亮整齐。

在我们的文章演示中，应用于content-visibility: auto分块的内容区域可以使初始负载的渲染性能提高7倍。请继续阅读以了解更多信息。

浏览器支持 #

content-visibility依赖CSS包含规范中的基元。虽然content-visibility目前仅在Chromium 85中受支持（并且被Firefox 视为“值得原型化”），但[大多数现代浏览器]4都支持Containment Spec 。

CSS Containment＃ #

CSS Containment的主要目标是通过提供DOM子树与页面其余部分的可预测隔离来实现Web内容的渲染性能改进。

基本上，开发人员可以告诉浏览器页面的哪些部分被封装为一组内容，从而使浏览器无需考虑子树之外的状态就可以对内容进行推理。知道内容（子树）的哪些位包含隔离的内容意味着浏览器可以为页面渲染做出优化决策。

CSS Containment 四种类型，每种类型都是containCSS属性的潜在值，可以将它们组合在一起，以空格分隔的值列表：

• size：元素上的大小限制可确保元素框的布局，而无需检查其后代。这意味着，如果我们仅需要元素的大小，就可以跳过后代的布局。
• layout：布局限制意味着后代不会影响页面上其他框的外部布局。如果我们只想布置其他盒子，这使我们有可能跳过后代的布局。
• style：样式包含可确保不仅对后代具有影响的属性不会逃脱元素（例如，计数器）。如果我们想要的只是在其他元素上计算样式，这使我们有可能跳过后代的样式计算。
• paint：包含油漆可以确保容纳盒的后代不会显示在其边界之外。没有任何内容可以使元素明显溢出，并且如果元素在屏幕外或以其他方式不可见，则其后代也将不可见。如果元素不在屏幕上，这使我们有可能跳过绘画后代。

使用content-visibility跳过渲染工作 #

可能很难弄清楚要使用哪个包含值，因为只有在指定了适当的设置后，浏览器优化才能开始。您可以使用这些值来查看最合适的值，或者可以使用另一个CSS属性content-visibility来自动应用所需的包含。content-visibility确保开发人员以最小的努力获得最大的浏览器性能提升。

content-visibility属性可以接受多个值，但是auto可以立即提高性能。有一个元素 content-visibility: auto的收益layout，style并paint遏制。如果该元素不在屏幕上（并且与用户无关，则相关元素将是在其子树中具有焦点或选择的元素），那么它也会获得size包容性（并且停止 绘画 和 对其内容进行命中测试）。

这是什么意思？简而言之，如果该元素不在屏幕上，则不会渲染其后代。浏览器在不考虑元素任何内容的情况下确定元素的大小，并在此处停止。跳过大多数渲染，例如元素子树的样式和布局。

当元素接近视口时，浏览器不再添加size 围堵并开始绘制和命中测试元素的内容。这使得渲染工作能够及时完成以被用户看到。

例如：旅游博客 #

在此示例中，我们将旅行博客的基线设置在右侧，并应用于content-visibility: auto左侧的大块区域。结果显示，在初始页面加载时，渲染时间从232ms变为30ms。

一个旅游博客通常包含一组带有一些图片和一些描述性文字的故事。这是典型浏览器导航到旅行博客时发生的情况：

1. 页面的一部分以及任何所需的资源都从网络下载。
2. 浏览器的样式和布局页面的所有内容，而无需考虑该内容是否对用户可见。
3. 浏览器返回到步骤1，直到下载了所有页面和资源。

在步骤2中，浏览器处理所有内容以查找可能已更改的内容。它会更新任何新元素的样式和布局，以及由于新更新而可能发生移动的元素。这是渲染工作。这需要时间。

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /*Explained in the next section.*/
}