如何只使用CSS提升頁面渲染速度

用戶喜歡快速的 Web 應(yīng)用。他們期望頁面加載速度快，運(yùn)行流暢。如果滾動(dòng)時(shí)出現(xiàn)動(dòng)畫中斷或延遲，用戶很可能就會(huì)離開你的網(wǎng)站。作為一名開發(fā)者，你可以做很多事情來提升用戶體驗(yàn)。本文主要介紹你可以用來提升頁面渲染速度的 4 個(gè) CSS 技巧。

一般來說，大部分 Web 應(yīng)用都有復(fù)雜的 UI 元素，并且它的擴(kuò)展超出了用戶在瀏覽器視圖中所能看到的范圍。在這種情況下，我們可以使用content-visibility來跳過渲染屏幕之外的內(nèi)容。如果你有大量屏幕之外的內(nèi)容的話，這會(huì)大大減少頁面渲染時(shí)間。

這個(gè)功能是最新添加的功能之一，而且它是提升渲染性能最有影響力的功能之一。content-visibility接受幾個(gè)值，我們可以在一個(gè)元素上使用content-visibility: auto;來立即獲得性能提升。

我們可以看下面這個(gè)頁面，包含很多顯示不同信息的卡片。雖然屏幕能顯示大約 12 個(gè)卡片，但列表中有差不多 375 個(gè)卡片。如你所見，瀏覽器花費(fèi) 1037ms 來渲染這個(gè)頁面。

一般 HTML 頁面

下一步，你可以向所有的卡片中加入content-visibility。

在這個(gè)例子中，向頁面中加入content-visibility后，渲染時(shí)間下降到 150ms。性能提升了 6 倍以上。

使用 content-visibility

如你所見，content-visibility 的功能很強(qiáng)大，對于改善頁面渲染時(shí)間非常有用。根據(jù)我們目前為止討論的內(nèi)容，你一定在想它是針對頁面渲染的靈丹妙藥。

然而，也有一些領(lǐng)域 content-visibility 不適合。我想強(qiáng)調(diào) 2 點(diǎn)供你考慮。

這個(gè)功能還是實(shí)驗(yàn)性的。目前，F(xiàn)irefox（PC 和 Android 版本）、Internet Explorer (我不認(rèn)為他們計(jì)劃向 IE 中添加這個(gè)功能) 以及 Safari (Mac 和 iOS) 不支持 content-visibility。

與滾動(dòng)條行為相關(guān)的問題。由于元素最初渲染的高度是 0px，當(dāng)你向下滾動(dòng)時(shí)，這些元素會(huì)進(jìn)入屏幕。實(shí)際的內(nèi)容會(huì)被渲染，這個(gè)元素的高度會(huì)被相應(yīng)地更新。這會(huì)使?jié)L動(dòng)條出現(xiàn)預(yù)料之外的行為。

使用 content-visibility 的滾動(dòng)行為

.element{
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

然而，在實(shí)驗(yàn)時(shí)，我發(fā)現(xiàn)即使使用containt-intrinsic-size，如果我們有很多元素都使用content-visibility且設(shè)置為auto，你仍然會(huì)有微小的滾動(dòng)條問題。因此，我的建議是規(guī)劃你的布局，將它分解為幾個(gè)部分，然后在那幾個(gè)部分上使用 content-visibility 來獲取更好的滾動(dòng)條行為。

瀏覽器上的動(dòng)畫并不是一個(gè)新鮮事物。通常，這些動(dòng)畫與其它元素一起正常渲染。然而，瀏覽器現(xiàn)在能夠使用 GPU 來優(yōu)化這些動(dòng)畫的某些操作。

使用 will-change CSS 屬性，我們可以表明該元素將要修改特定的屬性，讓瀏覽器提前執(zhí)行必要的優(yōu)化。

底層發(fā)生的是，瀏覽器會(huì)為這個(gè)元素創(chuàng)建一個(gè)單獨(dú)的層。然后，瀏覽器將這個(gè)元素的渲染委托給 GPU，以及其它一些優(yōu)化。由于 GPU 加速接管了動(dòng)畫渲染，最終這個(gè)動(dòng)畫會(huì)更流暢。

// In stylesheet
.animating-element {
  will-change: opacity;
}
// In HTML
<div class="animating-elememt">
  Animating Child elements
</div>

當(dāng)在瀏覽器中渲染上面的代碼時(shí)，它會(huì)識別出will-change屬性，并優(yōu)化未來與不透明度 opacity 相關(guān)的變更。

根據(jù) Maximillian Laumeister 所做的性能基準(zhǔn)測試，你可以看到他只改變了一行代碼就獲得了超過 120FPS 的渲染速度，而最初的渲染速度大約是 50FPS。

不使用 will-change；圖片來源：Maximilian

使用 will-change；圖片來源：Maximilian

盡管will-change是用來提升性能的，但如果你誤用它，也會(huì)降低 Web 應(yīng)用的性能。

使用will-change表明這個(gè)元素將來會(huì)改變。

.my-class{
  will-change: opacity;
}
.child-class{
  transition: opacity 1s ease-in-out;
}

不要使用未設(shè)置動(dòng)畫的元素。當(dāng)你在一個(gè)元素上使用will-change，瀏覽器會(huì)嘗試通過將它放到一個(gè)新層中并將轉(zhuǎn)換移交給 GPU 來優(yōu)化它。如果你沒有要轉(zhuǎn)換的東西，這會(huì)導(dǎo)致資源浪費(fèi)。

最后要記住的是，建議在完成所有動(dòng)畫之后將 will-change 從元素上刪除。

今天，許多 Web 應(yīng)用必須滿足許多形式因素，包括 PC、平板電腦和移動(dòng)手機(jī)等。為了實(shí)現(xiàn)這種響應(yīng)式特性，我們必須根據(jù)媒介大小編寫新的樣式。在頁面渲染時(shí)，直到 CSS 對象模型（CSS Object Model，CSSOM）準(zhǔn)備就緒，它才開始渲染階段。根據(jù)你的 Web 應(yīng)用，你可能有一個(gè)很大的樣式表來滿足所有的設(shè)備形式因素。

<link rel="stylesheet" href="styles.css">

單個(gè)樣式表

<!-- style.css contains only the minimal styles needed for the page rendering -->
<link rel="stylesheet" href="styles.css" media="all" />
<!-- Following stylesheets have only the styles necessary for the form factor -->
<link rel="stylesheet" href="sm.css" media="(min-width: 20em)" /><link rel="stylesheet" href="md.css" media="(min-width: 64em)" /><link rel="stylesheet" href="lg.css" media="(min-width: 90em)" /><link rel="stylesheet" href="ex.css" media="(min-width: 120em)" /><link rel="stylesheet" href="print.css" media="print" />

如你所見，根據(jù)形式因素拆分樣式表能夠減少渲染阻塞時(shí)間。

使用@import，我們可以在一個(gè)樣式表中包含另一個(gè)樣式表。當(dāng)我們在處理一個(gè)大型項(xiàng)目時(shí)，使用@import會(huì)讓代碼更簡潔。

# style.css
@import url("windows.css");
# windows.css
@import url("componenets.css");

使用 imports 的瀑布圖

與其使用@import，我們可以使用多個(gè)鏈接 link 實(shí)現(xiàn)相同的功能且具有更好的性能，因?yàn)樗试S并行下載樣式表。

使用鏈接的瀑布圖

除了本文我們討論的 4 個(gè)方面，還有一些其它的方法我們可以使用 CSS 來提高 Web 頁面的性能。CSS 最新的特性之一，content-visibility,在未來幾年看起來很有前景，因?yàn)樗梢栽陧撁驿秩痉矫鎺頂?shù)倍的性能提升。

最重要的是，我們不用編寫一句 JavaScript 代碼就可以獲得所有這些性能提升。

我相信，你可以結(jié)合以上特性，為最終用戶構(gòu)建性能更好的 Web 應(yīng)用。我希望這篇文章是有用的。謝謝！

歡迎自薦投稿到《前端技術(shù)江湖》，如果你覺得這篇內(nèi)容對你挺有啟發(fā)，記得點(diǎn)個(gè) 「在看」哦