使用CSS這個(gè)小技巧，可以讓長(zhǎng)列表網(wǎng)頁(yè)的渲染性能提升幾倍以上！

長(zhǎng)列表網(wǎng)頁(yè)相信大多數(shù)開發(fā)者都遇到過(guò)，在DOM元素過(guò)多的情況下，瀏覽器渲染會(huì)很慢，非常影響用戶體驗(yàn)。

因此我們會(huì)經(jīng)常采用虛擬滾動(dòng)、分頁(yè)、上拉加載更多等不同的方式來(lái)進(jìn)行優(yōu)化，這些方式的思想都是一樣的，都是只渲染可見區(qū)域，等用戶需要時(shí)再加載更多的內(nèi)容。而以上的方式無(wú)論哪種，都需要寫大量的js或者css邏輯去實(shí)現(xiàn)。

而現(xiàn)在，我們多了一種方式——content-visibility。只需要一行CSS代碼，就可以實(shí)現(xiàn)可見網(wǎng)頁(yè)只加載可見區(qū)域內(nèi)容，使網(wǎng)頁(yè)的渲染性能得到數(shù)倍的提升！

介紹

content-visibility是一個(gè)css屬性，它控制一個(gè)元素是否呈現(xiàn)其內(nèi)容，能讓用戶潛在地控制元素的呈現(xiàn)。用戶可以使用它跳過(guò)元素的呈現(xiàn)(包括布局和繪制)，直到用戶需要為止，讓頁(yè)面的初始渲染得到極大的提升。

value

content-visibility屬性有三個(gè)可選值:

• visible: 默認(rèn)值。對(duì)布局和呈現(xiàn)不會(huì)產(chǎn)生什么影響。
• hidden: 元素跳過(guò)其內(nèi)容的呈現(xiàn)。用戶代理功能（例如，在頁(yè)面中查找，按Tab鍵順序?qū)Ш降龋┎豢稍L問(wèn)已跳過(guò)的內(nèi)容，也不能選擇或聚焦。類似于對(duì)其內(nèi)容設(shè)置了display: none屬性。
• auto: 對(duì)于用戶可見區(qū)域的元素，瀏覽器會(huì)正常渲染其內(nèi)容；對(duì)于不可見區(qū)域的元素，瀏覽器會(huì)暫時(shí)跳過(guò)其內(nèi)容的呈現(xiàn)，等到其處于用戶可見區(qū)域時(shí)，瀏覽器在渲染其內(nèi)容。

效果對(duì)比

使用前

代碼

如下代碼，在瀏覽器中簡(jiǎn)單的使用100個(gè)卡片，并對(duì)其設(shè)置掃光效果動(dòng)畫:

??
????
????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;
????????}
??????}
????
??
??
????"card">