作者 | Rumesh Eranga Hapuarachchi
譯者 | 張健欣
策劃 | 田曉旭
使用者喜歡快速的 Web 應用。他們期望頁面加載速度快，運作流暢。如果滾動時出現動畫中斷或延遲，使用者很可能就會離開你的網站。作為一名開發者，你可以做很多事情來提升使用者體驗。本文主要介紹你可以用來提升頁面渲染速度的 4 個 CSS 技巧。
1. Content-visibility
一般來說，大部分 Web 應用都有複雜的 UI 元素，并且它的擴充超出了使用者在浏覽器視圖中所能看到的範圍。在這種情況下，我們可以使用
content-visibility
來跳過渲染螢幕之外的内容。如果你有大量螢幕之外的内容的話，這會大大減少頁面渲染時間。
這個功能是最新添加的功能之一，而且它是提升渲染性能最有影響力的功能之一。
content-visibility
接受幾個值，我們可以在一個元素上使用
content-visibility: auto;
來立即獲得性能提升。
我們可以看下面這個頁面，包含很多顯示不同資訊的卡片。雖然螢幕能顯示大約 12 個卡片，但清單中有差不多 375 個卡片。如你所見，浏覽器花費 1037ms 來渲染這個頁面。
一般 HTML 頁面
下一步，你可以向所有的卡片中加入
content-visibility
。
在這個例子中，向頁面中加入 content-visibility
使用 content-visibility
如你所見，content-visibility 的功能很強大，對于改善頁面渲染時間非常有用。根據我們目前為止讨論的内容，你一定在想它是針對頁面渲染的靈丹妙藥。
content-visibility 的限制
然而，也有一些領域 content-visibility 不适合。我想強調 2 點供你考慮。
這個功能還是實驗性的。目前，Firefox（PC 和 Android 版本）、Internet Explorer (我不認為他們計劃向 IE 中添加這個功能) 以及 Safari (Mac 和 iOS) 不支援 content-visibility。
與滾動條行為相關的問題。由于元素最初渲染的高度是 0px，當你向下滾動時，這些元素會進入螢幕。實際的内容會被渲染，這個元素的高度會被相應地更新。這會使滾動條出現預料之外的行為。
使用 content-visibility 的滾動行為
為了修複這個滾動條問題，你可以使用另一個 CSS 屬性，
contain-intrinsic-size
。它指定了一個元素的自然大小。是以，這個元素會用指定的高度渲染，而不是 0px。
.element{
content-visibility: auto;
contain-intrinsic-size: 200px;
} 然而，在實驗時，我發現即使使用
containt-intrinsic-size
，如果我們有很多元素都使用
content-visibility
且設定為
auto
，你仍然會有微小的滾動條問題。是以，我的建議是規劃你的布局，将它分解為幾個部分，然後在那幾個部分上使用 content-visibility 來擷取更好的滾動條行為。
2.
Will-change
屬性
浏覽器上的動畫并不是一個新鮮事物。通常，這些動畫與其它元素一起正常渲染。然而，浏覽器現在能夠使用 GPU 來優化這些動畫的某些操作。
使用 will-change CSS 屬性，我們可以表明該元素将要修改特定的屬性，讓浏覽器提前執行必要的優化。
底層發生的是，浏覽器會為這個元素建立一個單獨的層。然後，浏覽器将這個元素的渲染委托給 GPU，以及其它一些優化。由于 GPU 加速接管了動畫渲染，最終這個動畫會更流暢。
考慮如下 CSS 類：
// In stylesheet
.animating-element {
will-change: opacity;
}
// In HTML
<div class="animating-elememt">
Animating Child elements
</div> 當在浏覽器中渲染上面的代碼時，它會識别出
will-change
屬性，并優化未來與不透明度 opacity 相關的變更。
根據 Maximillian Laumeister 所做的性能基準測試，你可以看到他隻改變了一行代碼就獲得了超過 120FPS 的渲染速度，而最初的渲染速度大約是 50FPS。
不使用 will-change；圖檔來源：Maximilian
使用 will-change；圖檔來源：Maximilian
什麼時候不要用 will-change
盡管
will-change
是用來提升性能的，但如果你誤用它，也會降低 Web 應用的性能。
使用
will-change
表明這個元素将來會改變。
是以，如果你試圖将
will-change
與同步動畫一起使用，它不會給你優化。是以，建議在父元素上使用 will-change，在子元素上使用動畫。
.my-class{
will-change: opacity;
}
.child-class{
transition: opacity 1s ease-in-out;
} 不要使用未設定動畫的元素。當你在一個元素上使用
will-change
，浏覽器會嘗試通過将它放到一個新層中并将轉換移交給 GPU 來優化它。如果你沒有要轉換的東西，這會導緻資源浪費。
最後要記住的是，建議在完成所有動畫之後将 will-change 從元素上删除。
3. 減少渲染阻塞時間
今天，許多 Web 應用必須滿足許多形式因素，包括 PC、平闆電腦和移動手機等。為了實作這種響應式特性，我們必須根據媒介大小編寫新的樣式。在頁面渲染時，直到 CSS 對象模型（CSS Object Model，CSSOM）準備就緒，它才開始渲染階段。根據你的 Web 應用，你可能有一個很大的樣式表來滿足所有的裝置形式因素。
然而，假設我們根據形式因素将它拆分成多個樣式表。在這種情況下，我們可以隻讓主 CSS 檔案阻塞關鍵路徑，并将其優先下載下傳，讓其它樣式表以低優先級的方式下載下傳。
<link rel="stylesheet" href="styles.css"> 單個樣式表
在将它分解成多個樣式表後：
<!-- 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" /> 如你所見，根據形式因素拆分樣式表能夠減少渲染阻塞時間。
4. 避免使用 @import 來包含多個樣式表
使用
@import
，我們可以在一個樣式表中包含另一個樣式表。當我們在處理一個大型項目時，使用
@import
會讓代碼更簡潔。
關于 @import 的一個關鍵事實是，它是一個阻塞調用，因為它必須發起一個網絡請求來擷取這個檔案，解析它，然後将它包含在樣式表中。如果我們在樣式表中有嵌套的 @import，它會妨礙渲染性能。
# style.css
@import url("windows.css");
# windows.css
@import url("componenets.css"); 使用 imports 的瀑布圖
與其使用
@import
，我們可以使用多個連結 link 實作相同的功能且具有更好的性能，因為它允許并行下載下傳樣式表。
使用連結的瀑布圖
結論
除了本文我們讨論的 4 個方面，還有一些其它的方法我們可以使用 CSS 來提高 Web 頁面的性能。CSS 最新的特性之一，
content-visibility,
在未來幾年看起來很有前景，因為它可以在頁面渲染方面帶來數倍的性能提升。
最重要的是，我們不用編寫一句 JavaScript 代碼就可以獲得所有這些性能提升。
我相信，你可以結合以上特性，為最終使用者建構性能更好的 Web 應用。我希望這篇文章是有用的，如果你知道任何可以提升 Web 應用性能的 CSS 技巧，請在評論中留言。謝謝！