背景
在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。
因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。
而以上的方式无论哪种，都需要写大量的js或者css逻辑去实现。而现在，我们多了一种方式——content-visibility。
基本介绍
content-visibility是一个css属性，它控制一个元素是否呈现其内容，能让用户潜在地控制元素的呈现。用户可以使用它跳过元素的呈现(包括布局和绘制)，直到用户需要为止，让页面的初始渲染得到极大的提升。
value
content-visibility属性有三个可选值:
-
visible:默认值。对布局和呈现不会产生什么影响。 -
hidden:元素跳过其内容的呈现。用户代理功能（例如，在页面中查找，按Tab键顺序导航等）不可访问已跳过的内容，也不能选择或聚焦。类似于对其内容设置了display: none属性。 -
auto:对于用户可见区域的元素，浏览器会正常渲染其内容；对于不可见区域的元素，浏览器会暂时跳过其内容的呈现，等到其处于用户可见区域时，浏览器在渲染其内容。
使用效果
使用前
在浏览器中简单的使用100个卡片，并对其设置扫光效果动画:
渲染时间花费了1454ms
<style>
.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: '';
position: absolute;
left: -665px;
top: -460px;
width: 300px;
height: 15px;
background-color: rgba(255, 255, 255, 0.5);
transform: rotate(-45deg);
animation: searchLights 2s ease-in 0s infinite;
}
@keyframes searchLights {
0% {
}
75% {
left: -100px;
top: 0;
}
100% {
left: 120px;
top: 100px;
}
}
</style>
<body>
<div class="card"></div>
....很多个div
<div class="card"></div>
</body>
使用后
在class为card中添加
content-visibility: auto;：渲染时间只需要381ms
从dom结构变化中也可以看到，当card未出现在屏幕可见区域内是，其内容(::before等动画)在元素出现在可见效果时才出现
.card {
...省略其他代码
content-visibility: auto;
}
缺点
兼容性
content-visibility是chrome85今年新增的特性，所以目前兼容性还不高
部分元素导致浏览器渲染出问题
问题
当元素的部分内容如
<img />标签这种，元素的高度是有图片内容决定的，因此在这种情况下，如果使用content-visibility，则可见视图外的img初始未渲染，高度为0，随着滚动条向下滑动，页面高度增加，会导致滚动条的滚动有问题。
<style type="text/css">
.card {
margin-bottom: 10px;
content-visibility: auto;
}
</style>
<body>
<div class="card">
<img
src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1057266467,784420394&fm=26&gp=0.jpg"
alt="小狗"
/>
<!-- ... -->
<!-- 此处省略n个card内容 -->
<!-- ... -->
<img
src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1057266467,784420394&fm=26&gp=0.jpg"
alt="小狗"
/>
</div>
</body>
解决思路
如果在已知元素高度的情况下，可以使用contains-intrinsic-size属性，为上面的card添加：contains-intrinsic-size：312px;，这会给内容附一个初始高度值。（如果高度不固定也可以附一个大致的初始高度值，会使滚动条问题相对减少）。
如果列表项高度不固定而又非常重视用户的滚动条体验，那么不建议使用此属性
.card {
margin-bottom: 10px;
content-visibility: auto;
contain-intrinsic-size: 312px; // 添加此行
}
