两行css代码，添加了以后页面渲染性能将提高大约7倍，代码如下
{ content-visibility: auto; contain-intrinsic-size: 1px 5000px; }
为什么需要这个？
现在的网站需要优化和高性能，因为用户的注意力很短暂。阈值响应时间为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代码呢？
