做者 | Rumesh Eranga Hapuarachchicss
用戶喜歡快速的 Web 應用。他們指望頁面加載速度快，運行流暢。若是滾動時出現動畫中斷或延遲，用戶極可能就會離開你的網站。做爲一名開發者，你能夠作不少事情來提高用戶體驗。本文主要介紹你能夠用來提高頁面渲染速度的 4 個 CSS 技巧。前端
通常來講，大部分 Web 應用都有複雜的 UI 元素，而且它的擴展超出了用戶在瀏覽器視圖中所能看到的範圍。在這種狀況下，咱們可使用content-visibility來跳過渲染屏幕以外的內容。若是你有大量屏幕以外的內容的話，這會大大減小頁面渲染時間。windows
這個功能是最新添加的功能之一，並且它是提高渲染性能最有影響力的功能之一。content-visibility接受幾個值，咱們能夠在一個元素上使用content-visibility: auto;來當即得到性能提高。瀏覽器
咱們能夠看下面這個頁面，包含不少顯示不一樣信息的卡片。雖然屏幕能顯示大約 12 個卡片，但列表中有差很少 375 個卡片。如你所見，瀏覽器花費 1037ms 來渲染這個頁面。前端框架
通常 HTML 頁面微信
下一步，你能夠向全部的卡片中加入content-visibility。網絡
在這個例子中，向頁面中加入
content-visibility後，渲染時間降低到 150ms。性能提高了 6 倍以上。app
使用 content-visibility框架
如你所見，content-visibility 的功能很強大，對於改善頁面渲染時間很是有用。根據咱們目前爲止討論的內容，你必定在想它是針對頁面渲染的靈丹妙藥。佈局
然而，也有一些領域 content-visibility 不適合。我想強調 2 點供你考慮。
這個功能仍是實驗性的。目前，Firefox（PC 和 Android 版本）、Internet Explorer (我不認爲他們計劃向 IE 中添加這個功能) 以及 Safari (Mac 和 iOS) 不支持 content-visibility。
與滾動條行爲相關的問題。因爲元素最初渲染的高度是 0px，當你向下滾動時，這些元素會進入屏幕。實際的內容會被渲染，這個元素的高度會被相應地更新。這會使滾動條出現預料以外的行爲。
使用 content-visibility 的滾動行爲
contain-intrinsic-size。它指定了一個元素的天然大小。所以，這個元素會用指定的高度渲染，而不是 0px。
.element{
content-visibility: auto;
contain-intrinsic-size: 200px;
}
然而，在實驗時，我發現即便使用containt-intrinsic-size，若是咱們有不少元素都使用content-visibility且設置爲auto，你仍然會有微小的滾動條問題。所以，個人建議是規劃你的佈局，將它分解爲幾個部分，而後在那幾個部分上使用 content-visibility 來獲取更好的滾動條行爲。
Will-change屬性
瀏覽器上的動畫並非一個新鮮事物。一般，這些動畫與其它元素一塊兒正常渲染。然而，瀏覽器如今可以使用 GPU 來優化這些動畫的某些操做。
使用 will-change CSS 屬性，咱們能夠代表該元素將要修改特定的屬性，讓瀏覽器提早執行必要的優化。
底層發生的是，瀏覽器會爲這個元素建立一個單獨的層。而後，瀏覽器將這個元素的渲染委託給 GPU，以及其它一些優化。因爲 GPU 加速接管了動畫渲染，最終這個動畫會更流暢。
// 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是用來提高性能的，但若是你誤用它，也會下降 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 從元素上刪除。
今天，許多 Web 應用必須知足許多形式因素，包括 PC、平板電腦和移動手機等。爲了實現這種響應式特性，咱們必須根據媒介大小編寫新的樣式。在頁面渲染時，直到 CSS 對象模型（CSS Object Model，CSSOM）準備就緒，它纔開始渲染階段。根據你的 Web 應用，你可能有一個很大的樣式表來知足全部的設備形式因素。
<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" />
如你所見，根據形式因素拆分樣式表可以減小渲染阻塞時間。
使用@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 技巧，請在評論中留言。謝謝！
https://blog.bitsrc.io/improve-page-rendering-speed-using-only-css-a61667a16b2
最後
本文分享自微信公衆號 - 前端壹棧（Ecmscript）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。