本文將重點介紹4個可以用來提高頁面渲染速度的CSS技巧。
1. Content-visibility
一般來說,大多數Web應用都有複雜的UI元素,它的擴展範圍超出了用戶在瀏覽器視圖中看到的內容。在這種情況下,我們可以使用內容可見性( content-visibility
)來跳過屏幕外內容的渲染。如果你有大量的離屏內容,這將大大減少頁面渲染時間。
這個功能是最新增加的功能之一,也是對提高渲染性能影響最大的功能之一。雖然 content-visibility
接受幾個值,但我們可以在元素上使用 content-visibility: auto;
來獲得直接的性能提升。
讓我們考慮一下下面的頁面,其中包含許多不同信息的卡片。雖然大約有12張卡適合屏幕,但列表中大約有375張卡。正如你所看到的,瀏覽器用了1037ms來渲染這個頁面。
content-visibility
。
在這個例子中,在頁面中加入 content-visibility
後,渲染時間下降到150ms,這是6倍以上的性能提升。
content-visibility 的限制
-
此功能仍處於試驗階段。 截至目前,Firefox(PC和Android版本)、IE(我認爲他們沒有計劃在IE中添加這個功能)和,Safari(Mac和iOS)不支持內容可見性。 -
與滾動條行爲有關的問題。 由於元素的初始渲染高度爲0px,每當你向下滾動時,這些元素就會進入屏幕。實際內容會被渲染,元素的高度也會相應更新。這將使滾動條的行爲以一種非預期的方式進行。
contain-intrinsic-size
的 CSS 屬性。它指定了一個元素的自然大小,因此,元素將以給定的高度而不是0px呈現。
.element{
content-visibility: auto;
contain-intrinsic-size: 200px;
}
conta-intrinsic-size
,如果我們有大量的元素,
content-visibility
設置爲
auto
,你仍然會有較小的滾動條問題。
2. Will-change 屬性
通過will-change 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
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.減少渲染阻止時間
但是,假設我們根據表單因素將其拆分爲多個樣式表。在這種情況下,我們可以只讓主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");
@import
相比,我們可以通過多個
link
來實現同樣的功能,但性能要好得多,因爲它允許我們並行加載樣式表。
總結
content-visibility
,在未來的幾年裏看起來是如此的有前途,因爲它給頁面渲染帶來了數倍的性能提升。
最重要的是,我們不需要寫一條JavaScript語句就能獲得所有的性能。
來源:https://blog.bitsrc.io/improve-page-rendering-speed-using-only-css-a61667a16b2
作者:Rumesh Eranga Hapuarachchi
筆者的年終總結在這裏,希望能帶給你一點啓發。
本文分享自微信公衆號 - 全棧修煉(QuanZhanXiuLian)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。