两行CSS代码提升网站渲染性能7倍

1.两行CSS提升渲染性能7倍

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

2.为什么需要这个？

现在的网站需要优化和高性能，因为用户的注意力很短暂。阈值响应时间为400毫秒。
假如Facebook、Instagram这样的网站登录时间大于阈值会怎么样？那么大概没人会再回到这些网站了。大家说对吧？

3.哪些场景适合使用？

最常见的用例是当你需要在页面加载时呈现大量数据列表、数据表格或者图片列表的时候。
例如像文档、说明书这样的静态网站，或旅游博客等......

4.如何工作？

当你对CSS类应用content-visibility: auto时，浏览器就会变得非常聪明，它可以跳过渲染带有这个CSS属性的DOM元素。
浏览器需要知道DOM的布局才能渲染，且不会渲染那些不在视窗中的元素，而实际上你提供的contain-intrinsic-size会产生一个空框。
总而言之，所有渲染都被推迟到浏览器使用你提供的宽度、高度和样式渲染实际布局的视窗。

5.缺点

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

6.浏览器支持

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