一個CSS屬性讓你頁面渲染速度提升數(shù)倍

文章轉(zhuǎn)載自公眾號：code秘密花園

瀏覽器在接收到服務(wù)端返回的 HTML 之后，需要把這段數(shù)據(jù)渲染成用戶看到的頁面，在開始渲染第一個元素之前可能還需要經(jīng)過很多步驟。這個過程會適用于整個頁面，包括當(dāng)前不可見的內(nèi)容。

所以在首屏渲染時，是有很大一部分時間花費(fèi)在用戶不可見的內(nèi)容上，實(shí)際上這部分?jǐn)?shù)據(jù)我們沒必要在首屏就把它們渲染出來。

Chrome 85 新推出的 content-visibility: auto 就是為了解決上面的問題，它可以告訴瀏覽器暫時跳過該元素的布局和渲染工作，直到這個元素滾動到當(dāng)前視口，從而可以加快整個頁面的初始渲染，并且縮短用戶和頁面可交互需要花費(fèi)的時間。

CSS Containment

content-visibility 依賴于 CSS Containement，目前只能在 Chromium 85 中支持 content-visibility 屬性，但是大多數(shù)瀏覽器都支持 CSS Containement。

CSS Containment 是一種規(guī)范，它的主要目的就是在頁面渲染的過程中通過忽略文檔中的某些子樹來提高頁面的渲染性能。

上面我們提到，在首屏渲染時，是有很大一部分時間花費(fèi)在用戶不可見的內(nèi)容上，實(shí)際上這部分?jǐn)?shù)據(jù)我們沒必要在首屏就把它們渲染出來。作為開發(fā)者，肯定很清楚當(dāng)前修改的元素是否獨(dú)立或者影響其他元素。因此如果開發(fā)者能把這個信息通過 CSS 告訴瀏覽器，那么瀏覽器就不需要再去考慮其他元素了。CSS Containment 模塊中提供的 contain 屬性就為我們提供了這種能力。

css contain 一共有四個屬性：

• size: 在計算該元素盒子大小的時候會忽略其子元素
• layout: 元素的內(nèi)部布局不受外部影響，同時該元素以及其內(nèi)容也不會影響到上級
• style: 聲明同時會影響這個元素和其子孫元素的屬性，都在這個元素的包含范圍內(nèi)
• paint: 聲明這個元素的子孫節(jié)點(diǎn)不會在它邊緣外顯示。如果一個元素在視窗外或因其他原因?qū)е虏豢梢姡瑒t同樣保證它的子孫節(jié)點(diǎn)不會被顯示。

content-visibility

css contain 是一個很棒的屬性，但是我們不太容易判斷要選取它的哪個值。現(xiàn)在，我們可以直接應(yīng)用 content-visibility 來達(dá)到這樣的效果，但是配置卻簡單的多。

content-visibility 屬性也有多個值，但是 auto 這個值是一個可以立刻提高性能的屬性：

.my-class {
  content-visibility: auto;
}

如果一個元素具有 auto 這個屬性，如果當(dāng)前元素沒有出現(xiàn)在屏幕上，瀏覽器就不會渲染它和它的子元素；當(dāng)元素接近用戶的可視區(qū)域時，瀏覽器就會解除限制，并開始進(jìn)行渲染；這可以保證元素會及時被用戶看到。

看看上面的例子，在將 content-visibility: auto 設(shè)置到一些小的模塊之后，渲染時間直接從232ms提升到了30ms，性能提升了7倍。

contain-intrinsic-size

如果我們給可視區(qū)域外的元素增加了 content-visibility: auto 屬性，那么當(dāng)滾動條滾動到這個元素之后，如果這個元素很大有一定高度，那么滾動條的長度就會發(fā)生變化，頁面可能就會發(fā)生抖動的現(xiàn)象。

解決這個問題，可以先使用 contains-intrinsic-size 提前給元素設(shè)置自然高度的大小，比如 1000px ，這樣元素提前占用了一些高度，就不會發(fā)生抖動現(xiàn)象。

以上就是W3Cschool編程獅關(guān)于一個CSS屬性讓你頁面渲染速度提升數(shù)倍的相關(guān)介紹了，希望對大家有所幫助。