两行 CSS 提升渲染性能7倍！

话不多说，先直接上代码：

{
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}

就是这两行css代码，添加了以后页面渲染性能将提高大约7倍！

为什么需要这个？

现在的网站需要优化和高性能，因为用户的注意力很短暂。阈值响应时间为400毫秒。

假如Facebook、Instagram这样的网站登录时间大于阈值会怎么样？那么大概没人会再回到这些网站了。大家说对吧？

哪些场景适合使用？

最常见的用例是当你需要在页面加载时呈现大量数据列表、数据表格或者图片列表的时候。

例如像文档、说明书这样的静态网站，或旅游博客等......

如何工作？

当你对CSS类应用content-visibility: auto时，浏览器就会变得非常聪明，它可以跳过渲染带有这个CSS属性的DOM元素。

浏览器需要知道DOM的布局才能渲染，且不会渲染那些不在视窗中的元素，而实际上你提供的contain-intrinsic-size会产生一个空框。

总而言之，所有渲染都被推迟到浏览器使用你提供的宽度、高度和样式渲染实际布局的视窗。

P.S：不在视窗之外的布局会有一个height: 0，所以当延迟布局来到视窗时，会堆叠在一起，所以这就是为什么需要contain-intrinsic-size的原因。但是，不用担心，这些只是备用值，浏览器在视窗中渲染时将渲染实际值。

这样做的一个缺点是，如果未正确给出contain-intrinsic-size，滚动条会很古怪并出现抖动现象。

浏览器支持

content-visibility依赖于CSS Containment规范[1]。截至撰写本文时，大多数谷歌浏览器目前都支持content-visibility。

而且，content-visibility支持对于在高端系统上实现功能来说并不是一件坏事，所以我相信，随着web开发的进步，这将很快会得到所有浏览器的支持。

备选方案

再介绍一个使用JavaScript提高性能的替代方法，如使用List Virtualization[2]，但是，见识过这样简单明确的2行css ，谁还会想要编写和维护实现相同功能却需求100行的js代码呢？

参考资料

[1]CSS Containment规范: https://caniuse.com/css-containment

[2]List Virtualization: https://www.patterns.dev/posts/virtual-lists/