两行 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 代码呢？