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

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

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

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

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

CSS Containment

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

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

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

css contain 一共有四個(gè)屬性：

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

content-visibility

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

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

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

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

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

contain-intrinsic-size

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

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

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