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

我就不废话了，直接跳到你需要添加的两行 CSS，这样你的性能就可以提高大约7 倍：



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

你为什么需要这个？

如今的网站需要优化和高性能，而网络用户的注意力持续时间非常短。根据Doherty，阈值响应时间为400毫秒。

现在想象一下，像 Facebook、Instagram 等网站，如果访问时间超过了阈值，那会不会有人再访问这些网站呢？

最常见的用例是当您拥有需要在应用程序安装时呈现的大量数据列表/网格时。

例如：静态网站，如规格、文档或旅游博客等……

如果您有任何其他用例，我很乐意在评论中听到。

浏览器会很聪明地跳过您所应用的类的渲染工作content-visibility: auto。

浏览器需要知道 DOM 的布局才能进行渲染，那些不在视口中的元素不会被渲染，实际上会呈现contain-intrinsic-size您提供的空框。

总而言之，所有渲染都会被推迟，直到到达视口，浏览器才会使用您提供的宽度、高度和样式来渲染实际布局。

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

因此，这样做的一个缺点是，如果没有正确给出，滚动条会很古怪并跳转到某个地方contain-intrinsic-size。:)

content-visibility依赖于CSS Containment 规范。content-visibility截至撰写本文时，目前主要支持 Chromium 技术。

不过，content-visibility对于高端系统来说，支持这项功能已经很不错了。而且，随着 Web 开发的不断进步，它很快也会被所有浏览器支持。希望如此 :)

有一些替代方案可以使用 JavaScript 来提高性能，例如使用List 虚拟化，但是当你可以用两行代码完成js时，谁愿意编写 100 行代码并维护它呢？css

进一步阅读；你可以在 js 中做到这一点：
react-window
react-virtualized

问候，