只需一行CSS代码，让长列表网页的渲染性能提升几倍以上！

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

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

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

效果对比

---

使用前

代码

如下代码，在浏览器中简单的使用100个卡片，并对其设置扫光效果动画:

渲染效果

从chrome可以看出，渲染时间花费了1454ms：

使用后

代码

在class为card中添加 content-visibility: auto;：

.card {

position: relative;

overflow: hidden;

transition-duration: 0.3s;

margin-bottom: 10px;

width: 200px;

height: 100px;

background-color: #ffaa00;

content-visibility: auto;

}

.card:before {

content: ‘’;

// …

渲染效果

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

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

缺陷

–

兼容性

content-visibility是chrome85今年新增的特性，所以目前兼容性还不高，但是相信兼容性的问题在不久的将来会得到解决。目前兼容性如下：

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

问题

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