content-visibility
chrome85新出的几个对性能优化最有用的css之一。优先渲染屏幕内的可视内容，对屏幕之外的内容（包含布局）达到条件（进入视图区域）进行渲染。不仅放慢了首屏渲染速度，更放慢了页面可交互的速度。
增加css前后渲染速度比照
应用
这里为每个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的推动，置信这个属性肯定会失去更多浏览器的反对的。