浅析content-visibility属性了解提升长列表网页的渲染性能

　　长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。因此我们会经常采用时间分片、虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。而以上的方式无论哪种，都需要写大量的js或者css逻辑去实现。

　　而现在，我们多了一种方式：content-visibility。只需要一行CSS代码，就可以实现可见网页只加载可见区域内容，使网页的渲染性能得到数倍的提升！

一、content-visibility 了解

　　content-visibility 是一个css属性，它控制一个元素是否呈现其内容，能让用户潜在地控制元素的呈现。用户可以使用它跳过元素的呈现(包括布局和绘制)，直到用户需要为止，让页面的初始渲染得到极大的提升。

1、value：content-visibility属性有三个可选值:

　　visible: 默认值。对布局和呈现不会产生什么影响。

　　hidden: 元素跳过其内容的呈现。用户代理功能（例如，在页面中查找，按Tab键顺序导航等）不可访问已跳过的内容，也不能选择或聚焦。类似于对其内容设置了display: none属性。

　　auto: 对于用户可见区域的元素，浏览器会正常渲染其内容；对于不可见区域的元素，浏览器会暂时跳过其内容的呈现，等到其处于用户可见区域时，浏览器在渲染其内容。

2、效果对比：

（1）使用 content-visibility: auto; 后渲染时间只需要381ms，性能提升了近4倍！而且随着元素内容变复杂，提升的性能会有更明显的上升。

（2）从dom结构变化中也可以看到，当card未出现在屏幕可见区域内时，其内容(::before等动画)在元素出现在可见效果时才出现

3、兼容性：chrome85以上支持、safari、firefox 均不支持

二、部分元素导致浏览器渲染出问题

1、问题现场：

　　当元素的部分内容如<img />标签这种，元素的高度是由图片内容决定的，因此在这种情况下，如果使用content-visibility，则可见视图外的 img 初始未渲染，高度为 0，随着滚动条向下滑动，页面高度增加，会导致滚动条的滚动有问题。

2、解决思路：

　　解决此问题，如果在已知元素高度的情况下，可以使用contains-intrinsic-size属性，为上面的card添加：contains-intrinsic-size：312px;，这会给内容附一个初始高度值。（如果高度不固定也可以附一个大致的初始高度值，会使滚动条问题相对减少）。

　　详情可以看这篇文章：https://juejin.cn/post/6908521872577527822

3、总结：

（1）content-visibility 是一个非常实用的CSS属性，通过一行CSS可以代替虚拟滚动、上拉加载更多等多种长列表渲染优化方式。

（2）目前兼容性现在不是很好，谷歌支持比较好、火狐和mac暂不支持

（3）部分场景下它对浏览器的滚动条影响问题：

　　如果你的列表项高度相同，那么可以通过contain-intrinsic-size来设置一个初始高度解决。

　　如果列表项高度不固定而又非常重视用户的滚动条体验，那么不建议使用此属性。

　　当然了，这一css属性出来的时间并不是太长，随着它的完善，这一问题或许在将来也能够得到解决。所以我们可以了解下，以便后续关注且合理使用，在长列表的应用场景，这会是一个可酌情备选的解决方案。