content-visibility
chrome85新出的几个对性能优化最有用的css之一。优先渲染屏幕内的可视内容，对屏幕之外的内容（包括布局）达到条件（进入视图区域）进行渲染。不仅加快了首屏渲染速度，更加快了页面可交互的速度。
添加css前后渲染速度对比
before.png
after.png
使用
这里为每个card添加一个反光效果，通过上图可以明显看到添加前后的区别。
<html>
<head>
<title>content-visibility</title>
<style type="text/css">
.card {
content-visibility: auto;
position: relative;
overflow: hidden;
transition-duration: 0.3s;
margin-bottom: 10px;
width: 200px;
height: 100px;
background-color: #ffaa00;
}
.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>
</head>
<body>
<div class="card"></div>
<!-- 这里有1w多个 <div class="card"></div> div越多 效果越明显 -->
<div class="card"></div>
</body>
这里还有个问题，上面的.card我们为其添加了宽高属性，如果高度由子节点决定，这时滚动条是有问题的，这里我们要配合使用contain-intrainsic-size: 100px;为其设置一个默认的跟真实.card高度差不多的值，看起来就不会那么明显了。
浏览器兼容情况
由图可见，此css属性目前兼容性并不是特别好，但是随着chrome的推进，相信这个属性一定会得到更多浏览器的支持的。
兼容.png
