两行CSS提升页面近7倍的渲染性能

content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略大量布局和渲染工作，直到需要它为止。

他的几个常见的取值：
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

分别解释一下：
content-visibility：visible 默认值 没有任何效果

content-visibility：hidden 他和display：none类似，用户代理降跳过其渲染的内容。 消失的只是添加了该元素的 div 的子元素消失不见，而父元素本身及其样式，还是存在页面上的。
设置了 content-visibility: hidden 的元素，其元素的子元素将被隐藏，但是，它的渲染状态将会被缓存。所以，当 content-visibility: hidden 被移除时，用户代理无需重头开始渲染它和它的子元素。
因此，如果我们将这个属性应用在一些一开始需要被隐藏，但是其后在页面的某一时刻需要被渲染，或者是一些需要被频繁切换显示、隐藏状态的元素上，其渲染效率将会有一个非常大的提升。

作者：chokcoco
链接：https://juejin.cn/post/7108921365628977166
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

content-visibility：auto 如果该元素不在可视屏幕上，并且和用户无关，则不会渲染其后代元素
利用 content-visibility: auto 实现虚拟列表
如果该元素不在屏幕上，并且与用户无关，则不会渲染其后代元素。是不是与 LazyLoad 非常类似？

当然，现代浏览器愈加趋于智能，基于这种场景，其实我们非常希望对于仍未看到，仍旧未滚动到的区域，可以延迟加载，只有到我们需要展示、滚动到该处时，页面内容才进行渲染。
基于这种场景，content-visibility: auto 就应运而生了，它允许浏览器对于设置了该属性的元素进行判断，如果该元素当前不处于视口内，则不渲染该元素。

当然，除 content-visibility 之外，还有一个与之配套的属性 – contain-intrinsic-size。

利用 contain-intrinsic-size 解决滚动条抖动问题

.paragraph {
    content-visibility: auto;
    contain-intrinsic-size: 320px;
}

content-visibility: auto 无法直接替代 LazyLoad，设置了 content-visibility: auto 的元素在可视区外只是未被渲染，但是其中的静态资源仍旧会在页面初始化的时候被全部加载。
所以，在实际使用中，如果你的业务中已经使用了比较完善的 Lazyload 处理长列表或者一些图片资源，那么 content-visibility: auto 不是更好的选择。

总结一下
再简单总结一下：

在一些需要被频繁切换显示、隐藏状态的元素上，使用 content-visibility: hidden，用户代理无需重头开始渲染它和它的子元素，能有效的提升切换时的渲染性能；
content-visibility: auto 的作用更加类似于虚拟列表，使用它能极大的提升长列表、长文本页面的渲染性能；
合理使用 contain-intrinsic-size 预估设置了content-visibility: auto 元素的高宽，可以有效的避免滚动条在滚动过程中的抖动；
content-visibility: auto 无法直接替代 LazyLoad，设置了 content-visibility: auto 的元素在可视区外只是未被渲染，但是其中的静态资源仍旧会在页面初始化的时候被全部加载；
即便存在设置了 content-visibility: auto 的未被渲染的元素，但是它并不会影响全局的搜索功能。