content-visibility: 一个能够提升渲染性能的css属性
经过跳过屏幕外的内容渲染来缩短初始加载时间css
在Chromium 85中，content-visibility属性多是在提升页面加载性能方面最具影响力的新CSS属性之一。由于content-visibility可跳过不在屏幕上的内容渲染，包括布局和渲染，直到真正须要布局渲染的时候为止。因此利用它可使初始用户加载速度更快，还能与屏幕上的内容进行更快的交互。html
在上面这个demo中，使用content-visibility: auto属性可以使分块的内容区域的初始加载性能提升7倍。请阅读下面更多信息。git
浏览器支持
content-visibility依赖于css Containement Spec中的原语（primitives）。虽然截止到目前只有Chromium 85中支持content-visibility属性（and deemed "worth prototyping" for Firefox），可是大多数现代浏览器均支持Containement Spec。github
CSS Containment
CSS Containment 规范的主要目的是，在页面渲染的过程当中经过忽略文档中的某些子树来提升页面的渲染性能。web
当容器的内容发生变化时，浏览器考虑到其余元素可能也会发生变化，因而就会去检查页面中全部的元素。一直以来浏览器都是这么作的，你们都习觉得常了。可是从另外一方面说，开发者很清楚当前修改的元素是否独立、是否影响其余元素。所以若是开发者能把这个信息经过 CSS 告诉浏览器，那么浏览器就不须要再去考虑其余元素了，这将是很是完美的事情。CSS Containment 模块中提供的 contain 属性就为咱们提供了这种能力。chrome
css contain 有四个属性能够以空格分割的方式组合在一块儿，而每个属性又能够单独可用。浏览器
- size: 表示元素盒子的大小是独立于其内容，也就是说在计算该元素盒子大小的时候是会忽略其子元素
- layout: 该值表示元素的内部布局不受外部的任何影响，同时该元素以及其内容也不会影响到上级
- style: 声明那些同时会影响这个元素和其子孙元素的属性，都在这个元素的包含范围内
- paint: 声明这个元素的子孙节点不会在它边缘外显示。若是一个元素在视窗外或因其余缘由致使不可见，则一样保证它的子孙节点不会被显示。
设置content-visibility 跳过渲染
通常很难清楚明白使用哪一个contain属性，由于只有在指定了适当的值后，浏览器才开始优化。你可使用这些值来验证最有效的方法，也可使用content-visibility的CSS属性来自动应用所用的容量。content-visibility可确保你以开发人员最小的成原本得到浏览器最大的性能提高。缓存
content-visibility属性接受多个值，可是auto是可当即提升性能的属性。一个具备content-visibility: auto属性的元素能够得到布局、样式和绘制的限制（区域）。若是该元素不在屏幕上（而且与用户无关，则相关元素将是在其子树中具备焦点或已选择的元素），它也会得到大小限制（containment）(而且中止绘制和对其内容进行命中测试)。网络
这意味着什么呢？简而言之，若是元素不在屏幕上，这不会渲染其后代。浏览器在不考虑元素任何内容的状况下肯定元素的大小，在此处则跳过大多数渲染（例如元素子树的样式和布局）。app
当元素接近视口时，浏览器再也不增长大小限制，而是开始绘制并命中测试元素的内容。这使得渲染工做可以及时被用户看到。
例子：旅游博客
在此示例中，咱们将旅行博客的基线设置在右侧，并将content-visibility：auto应用于左侧的分块区域。 结果显示，在初始页面加载时，渲染时间从232ms变为30ms。
通常旅游博客都会包含一些图片和一些描述性的文字故事。这是典型浏览器导航到旅行博客时发生的状况：
- 页面的部份内容以及任何所需的资源都从网络下载
- 浏览器的样式和布局页面的全部内容，而无需考虑该内容是否对用户可见
- 浏览器返回到步骤1，直到下载了全部页面和资源
在步骤2中，浏览器处理全部内容以查找可能已更改的内容。 它会更新任何新元素的样式和布局，以及因为新更新而可能发生移动的元素。 这是渲染工做。 这须要时间。
demo: https://codepen.io/una/pen/rNxEWLo
如今考虑一下，若是将content-visibility: auto设置在博客上每一个单独的故事上会发生什么呢？通常是相同的循环：浏览器下载并呈现大块的内容。可是，不一样之处则是步骤2的工做量。
借助content-visibility,他将设置样式和布局用户当前可见的全部内容（他们在屏幕可视区域内）。可是，当处理彻底不在屏幕上的内容使，浏览器将跳过渲染工做，仅样式化和布局元素框自己。
加载页面的性能好像它只包含完整的屏幕上的内容以及每一个非屏幕上的内容的空白框。这样的效果看起来要好的多，其能够将加载的渲染成本下降50%或更多。在咱们的示例中，咱们看到渲染的时间从232ms提高到了30ms，性能提高了7倍。
为了得到这些好处，您须要作什么工做？ 首先，咱们将内容分红几部分：
Example of chunking content into sections with the story class applied, to receive content-visibility: auto. See Demo on Codepen
而后，咱们将如下样式规则应用于这些部分：
.story { content-visibility: auto; contain-intrinsic-size: 1000px; /* Explained in the next section. */ }
注意：随着内容移入和移出可见性，它将根据须要开始和中止绘制。 可是，这并不意味着浏览器将不得不一次又一次地渲染和从新渲染相同的内容，由于在可能的状况下会保存渲染工做。
使用contain-intrinsic-size指定元素的天然大小
为了实现content-visibility的潜在好处，浏览器须要应用大小限制，以确保内容的呈现结果不会被任何方式影响元素的大小。 这意味着该元素将布局为好像是空的。 若是元素没有在常规块布局中指定的高度，则其高度为0。
这可能不是理想的，由于滚动条的大小会发生变化，这取决于每一个具备非零高度的内容。
值得庆幸的是，CSS提供了另外一个属性contains-intrinsic-size，若是元素受大小限制影响，它能够有效地指定元素的天然大小。 在咱们的示例中，咱们将其设置为1000px，做为对这些部分的高度和宽度的估计。
这意味着它好像有一个“内在大小”尺寸的子项同样进行布局，从而确保未调整大小的div仍然占据空间。 contains-intrinsic-size用做占位符大小，而不是呈现的内容。
隐藏内容设置content-visibility: hidden
若是想要利用缓存绘制状态的优势，使内容不显示在屏幕上而又不绘制它怎么办？使用content-visibility: hidden.
content-visibility：hidden属性为您提供未渲染内容和缓存的渲染状态的全部相同好处，如content-visibility：auto does off-screen。 可是，与auto不一样，它不会自动开始在屏幕上渲染。
这给了您更多的控制权，使您能够隐藏元素的内容并稍后快速取消隐藏它们。
将其与其余隐藏元素内容的常见方式进行比较：
- display：none：隐藏元素并破坏其渲染状态。 这意味着取消隐藏元素与渲染具备相同内容的新元素同样昂贵。
- visibility：hidden：隐藏元素并保持其渲染状态。 这并不能真正从文档中删除该元素，由于它（及其子树）仍占据页面上的几何空间，而且仍然能够单击。 它也能够在须要时随时更新渲染状态，即便隐藏也是如此。
另外一方面，content-visibility：hidden隐藏元素，同时保留其呈现状态，所以，若是须要进行任何更改，则仅在再次显示元素时才会发生更改（即content-visibility：hidden属性已移除）。
content-visibility：hidden的一些很好用例：实现高级虚拟滚动条和测量布局。
结论：
content-visibility和CSS Containment Spec意味着您的CSS文件将得到一些使人兴奋的性能提高。 有关这些属性的更多信息，请参考：
翻译原文：https://web.dev/content-visibility/
参考内容：
一、https://www.infoq.cn/article/lBECNlBbgd81U01aQUMF?utm_source=related_read&utm_medium=article
二、https://www.zcfy.cc/article/css-containment-in-chrome-52-web-updates-google-developers-873.html