看如何用CSS程式碼讓你的列表網頁提升渲染效能
長列表網頁相信大多數開發者都遇到過，在DOM元素過多的情況下，瀏覽器渲染會很慢，非常影響使用者體驗。
因此我們會經常採用虛擬滾動、分頁、上拉載入更多等不同的方式來進行優化，這些方式的思想都是一樣的，都是隻渲染可見區域，等使用者需要時再載入更多的內容。而以上的方式無論哪種，都需要寫大量的js或者css邏輯去實現。
而現在，我們多了一種方式——content-visibility。只需要一行CSS程式碼，就可以實現可見網頁只加載可見區域內容，使網頁的渲染效能得到數倍的提升！
介紹
content-visibility是一個css屬性，它控制一個元素是否呈現其內容，能讓使用者潛在地控制元素的呈現。使用者可以使用它跳過元素的呈現(包括佈局和繪製)，直到使用者需要為止，讓頁面的初始渲染得到極大的提升。
value
content-visibility屬性有三個可選值:
- visible: 預設值。對佈局和呈現不會產生什麼影響。
- hidden: 元素跳過其內容的呈現。使用者代理功能（例如，在頁面中查詢，按Tab鍵順序導航等）不可訪問已跳過的內容，也不能選擇或聚焦。類似於對其內容設定了display: none屬性。
- auto: 對於使用者可見區域的元素，瀏覽器會正常渲染其內容；對於不可見區域的元素，瀏覽器會暫時跳過其內容的呈現，等到其處於使用者可見區域時，瀏覽器在渲染其內容。
效果對比
使用前
程式碼
如下程式碼，在瀏覽器中簡單的使用100個卡片，並對其設定掃光效果動畫:
<html>
<head>
<title>content-visibility</title>
<style type="text/css">
.card {
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>
<div class="card"></div>
<!-- ... -->
<!-- 此處省略97個<div class="card"></div> -->
<!-- ... -->
<div class="card"></div>
</body>
</html>
渲染效果
從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，隨著滾動條向下滑動，頁面高度增加，會導致滾動條的滾動有問題。
<html>
<head>
<title>content-visibility</title>
<style type="text/css">
.card {
margin-bottom: 10px;
content-visibility: auto;
}
</style>
</head>
<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>
</html>
解決思路
解決此問題，如果在已知元素高度的情況下，可以使用contains-intrinsic-size屬性，為上面的card新增：contains-intrinsic-size：312px;，這會給內容附一個初始高度值。（如果高度不固定也可以附一個大致的初始高度值，會使滾動條問題相對減少）。
修改程式碼如下:
<style type="text/css">
.card {
margin-bottom: 10px;
content-visibility: auto;
contain-intrinsic-size: 312px; // 新增此行
}
</style>
再次看滾動條就沒有問題了：
總結
content-visibility是一個非常實用的CSS屬性，通過一行CSS可以代替虛擬滾動、上拉載入更多等多種長列表渲染優化方式。
雖然其相容性現在不是很好，但是相信不久的將來這並不是問題。現在來看是部分場景下它對瀏覽器的滾動條影響問題，如果你的列表項高度相同，那麼可以通過contain-intrinsic-size來設定一個初始高度解決。如果列表項高度不固定而又非常重視使用者的滾動條體驗，那麼不建議使用此屬性。當然了，這一css屬性出來的時間並不是太長，雖然它的完善，這一問題或許在將來也能夠得到解決。
相關前端培訓開發技術知識，請關注我，有更多精彩內容與您分享！