关于前端:两行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。