來源: https://blog.zhangbing.site/2020/12/28/improve-page-rendering-speed-using-only-css/
用戶喜歡快速的網絡應用,他們但願頁面加載速度快,功能流暢。若是在滾動時有破損的動畫或滯後,用戶頗有可能會離開你的網站。做爲一名開發者,你能夠作不少事情來改善用戶體驗。本文將重點介紹4個能夠用來提升頁面渲染速度的CSS技巧。css
通常來講,大多數Web應用都有複雜的UI元素,它的擴展範圍超出了用戶在瀏覽器視圖中看到的內容。在這種狀況下,咱們可使用內容可見性( content-visibility
)來跳過屏幕外內容的渲染。若是你有大量的離屏內容,這將大大減小頁面渲染時間。html
這個功能是最新增長的功能之一,也是對提升渲染性能影響最大的功能之一。雖然 content-visibility
接受幾個值,但咱們能夠在元素上使用 content-visibility: auto;
來得到直接的性能提高。windows
讓咱們考慮一下下面的頁面,其中包含許多不一樣信息的卡片。雖然大約有12張卡適合屏幕,但列表中大約有375張卡。正如你所看到的,瀏覽器用了1037ms來渲染這個頁面。瀏覽器
下一步,您能夠向全部卡添加 content-visibility
。網絡
在這個例子中,在頁面中加入
content-visibility
後,渲染時間降低到150ms,這是6倍以上的性能提高。
正如你所看到的,內容可見性是至關強大的,對提升頁面渲染時間很是有用。根據咱們目前所討論的東西,你必定是把它當成了頁面渲染的銀彈。佈局
然而,有幾個領域的內容可視性不佳。我想強調兩點,供你們參考。性能
爲了解決滾動條的問題,你可使用另外一個叫作 contain-intrinsic-size
的 CSS 屬性。它指定了一個元素的天然大小,所以,元素將以給定的高度而不是0px呈現。優化
.element{ content-visibility: auto; contain-intrinsic-size: 200px; }
然而,在實驗時,我注意到,即便使用 conta-intrinsic-size
,若是咱們有大量的元素, content-visibility
設置爲 auto
,你仍然會有較小的滾動條問題。動畫
所以,個人建議是規劃你的佈局,將其分解成幾個部分,而後在這些部分上使用內容可見性,以得到更好的滾動條行爲。網站
瀏覽器上的動畫並非一件新鮮事。一般狀況下,這些動畫是和其餘元素一塊兒按期渲染的。不過,如今瀏覽器可使用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
屬性並優化將來與不透明度相關的變化。
根據Maximillian Laumeister所作的性能基準,能夠看到他經過這個單行的改變得到了超過120FPS的渲染速度,而最初的渲染速度大概在50FPS。
雖然 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對象模型(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" />
如您所見,根據樣式因素分解樣式表能夠減小渲染阻止時間。
經過 @import
,咱們能夠在另外一個樣式表中包含一個樣式表。當咱們在處理一個大型項目時,使用 @import
可使代碼更加簡潔。
關於@import
的關鍵事實是,它是一個阻塞調用,由於它必須經過網絡請求來獲取文件,解析文件,並將其包含在樣式表中。若是咱們在樣式表中嵌套了@import
,就會妨礙渲染性能。
# style.css @import url("windows.css"); # windows.css @import url("componenets.css");
與使用 @import
相比,咱們能夠經過多個 link
來實現一樣的功能,但性能要好得多,由於它容許咱們並行加載樣式表。
除了咱們在本文中討論的4個方面,咱們還有一些其餘的方法可使用CSS來提升網頁的性能。CSS最近的一個特性: content-visibility
,在將來的幾年裏看起來是如此的有前途,由於它給頁面渲染帶來了數倍的性能提高。
最重要的是,咱們不須要寫一條JavaScript語句就能得到全部的性能。
我相信你能夠結合以上的一些功能,爲終端用戶構建性能更好的Web應用。但願這篇文章對你有用,若是你知道什麼CSS技巧能夠提升Web應用的性能,請在下面的評論中說起。謝謝你們。