content-visibility
chrome85新出的幾個對性能優(yōu)化最有用的css之一。優(yōu)先渲染屏幕內(nèi)的可視內(nèi)容，對屏幕之外的內(nèi)容（包括布局）達到條件（進入視圖區(qū)域）進行渲染。不僅加快了首屏渲染速度，更加快了頁面可交互的速度。
添加css前后渲染速度對比
before.png
after.png
使用
這里為每個card添加一個反光效果，通過上圖可以明顯看到添加前后的區(qū)別。
<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我們?yōu)槠涮砑恿藢捀邔傩?，如果高度由子?jié)點決定，這時滾動條是有問題的，這里我們要配合使用contain-intrainsic-size: 100px;為其設置一個默認的跟真實.card高度差不多的值，看起來就不會那么明顯了。
瀏覽器兼容情況
由圖可見，此css屬性目前兼容性并不是特別好，但是隨著chrome的推進，相信這個屬性一定會得到更多瀏覽器的支持的。
兼容.png
