两行CSS让页面提升了近7倍渲染性能

前言

对于前端人员来讲，最令人头疼的应该就是页面性能了，当用户在访问一个页面时，总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢，你的用户很可能会因此离你而去。所以页面性能对于前端开发者来说可谓是重中之重，其实你如果了解页面从加载到渲染完成的整个过程，就知道应该从哪方面下手了。

嗯，不要跑偏了，今天我们主要来研究长列表页面的渲染性能

现如今的页面越来越复杂，一个页面往往承载着大量的元素，最常见的就是一些电商页面，数以万计的商品列表是怎么保证渲染不卡顿的，大家在面对这种长列表渲染的场景下，一般都会采用分页或者虚拟列表来减缓页面一次性渲染的压力，但这些方式都需要配合JS来时实现，那么有没有仅使用CSS就能够实现的方案呢？

答案是有的，它就是我们今天的主角 —— 内容可见性（content-visibility）

content-visibility

属性值

content-visibility是CSS新增的属性，主要用来提高页面渲染性能，它可以控制一个元素是否渲染其内容，并且允许浏览器跳过这些元素的布局与渲染。

• visible：默认值，没有效果。元素的内容被正常布局和呈现。
• hidden：元素跳过它的内容。跳过的内容不能被用户代理功能访问，例如在页面中查找、标签顺序导航等，也不能被选择或聚焦。这类似于给内容设置display: none。
• auto：该元素打开布局包含、样式包含和绘制包含。如果该元素与用户不相关，它也会跳过其内容。与 hidden 不同，跳过的内容必须仍可正常用于用户代理功能，例如在页面中查找、tab 顺序导航等，并且必须正常可聚焦和可选择。

content-visibility: hidden手动管理可见性

上面说到content-visibility: hidden的效果与display: none类似，但其实两者还是有比较大的区别的：

• content-visibility: hidden 只是隐藏了子元素，自身不会被隐藏
• content-visibility: hidden 隐藏内容的渲染状态会被缓存，所以当它被移除或者设为可见时，浏览器不会重新渲染，而是会应用缓存，所以对于需要频繁切换显示隐藏的元素，这个属性能够极大地提高渲染性能。

从这上面我们可以看到，添加了content-visibility: hidden元素的子元素确实是没有渲染，但它自身是会渲染的！

content-visibility: auto 跳过渲染工作

我们仔细想想，页面上虽然会有很多元素，但是它们会同时呈现在用户眼前吗，很显然是不会的，用户每次能够真实看到就只有设备可见区那些内容，对于非可见区的内容只要页面不发生滚动，用户就永远看不到。虽然用户看不到，但浏览器却会实实在在的去渲染，以至于浪费大量的性能。所以我们得想办法让浏览器不渲染非可视区的内容就能够达到提高页面渲染性能的效果。

我们上面说到的虚拟列表原理其实就跟这个类似，在首屏加载时，只加载可视区的内容，当页面发生滚动时，动态通过计算获得