两行 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.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 两行 CSS 提升渲染性能7倍!