僅使用CSS就可以提高頁(yè)面渲染速度的4個(gè)技巧

文末福利資源更新

本文將重點(diǎn)介紹4個(gè)可以用來提高頁(yè)面渲染速度的CSS技巧。

1. Content-visibility

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

這個(gè)功能是最新增加的功能之一，也是對(duì)提高渲染性能影響最大的功能之一。雖然 content-visibility 接受幾個(gè)值，但我們可以在元素上使用 content-visibility: auto; 來獲得直接的性能提升。

讓我們考慮一下下面的頁(yè)面，其中包含許多不同信息的卡片。雖然大約有12張卡適合屏幕，但列表中大約有375張卡。正如你所看到的，瀏覽器用了1037ms來渲染這個(gè)頁(yè)面。

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

content-visibility 的限制

• 此功能仍處于試驗(yàn)階段。 截至目前，F(xiàn)irefox（PC和Android版本）、IE（我認(rèn)為他們沒有計(jì)劃在IE中添加這個(gè)功能）和，Safari（Mac和iOS）不支持內(nèi)容可見性。
• 與滾動(dòng)條行為有關(guān)的問題。 由于元素的初始渲染高度為0px，每當(dāng)你向下滾動(dòng)時(shí)，這些元素就會(huì)進(jìn)入屏幕。實(shí)際內(nèi)容會(huì)被渲染，元素的高度也會(huì)相應(yīng)更新。這將使?jié)L動(dòng)條的行為以一種非預(yù)期的方式進(jìn)行。

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

2. Will-change 屬性

通過will-change CSS屬性，我們可以表明元素將修改特定的屬性，讓瀏覽器事先進(jìn)行必要的優(yōu)化。

// In stylesheet
.animating-element {
  will-change: opacity;
}

// In HTML
<div class="animating-elememt">
  Animating Child elements
div>

根據(jù)Maximillian Laumeister所做的性能基準(zhǔn)，可以看到他通過這個(gè)單行的改變獲得了超過120FPS的渲染速度，而最初的渲染速度大概在50FPS。

什么時(shí)候不是用will-change

• 使用 will-change 表示該元素在未來會(huì)發(fā)生變化。 因此，如果你試圖將 will-change 和動(dòng)畫同時(shí)使用，它將不會(huì)給你帶來優(yōu)化。因此，建議在父元素上使用 will-change ，在子元素上使用動(dòng)畫。

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

• 不要使用非動(dòng)畫元素。 當(dāng)你在一個(gè)元素上使用 will-change 時(shí)，瀏覽器會(huì)嘗試通過將元素移動(dòng)到一個(gè)新的圖層并將轉(zhuǎn)換工作交給GPU來優(yōu)化它。如果您沒有任何要轉(zhuǎn)換的內(nèi)容，則會(huì)導(dǎo)致資源浪費(fèi)。

3.減少渲染阻止時(shí)間

但是，假設(shè)我們根據(jù)表單因素將其拆分為多個(gè)樣式表。在這種情況下，我們可以只讓主CSS文件阻塞關(guān)鍵路徑，并以高優(yōu)先級(jí)下載它，而讓其他樣式表以低優(yōu)先級(jí)方式下載。

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

<link rel="stylesheet" href="styles.css" media="all" />

<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包含多個(gè)樣式表

關(guān)于 @import 的關(guān)鍵事實(shí)是，它是一個(gè)阻塞調(diào)用，因?yàn)樗仨毻ㄟ^網(wǎng)絡(luò)請(qǐng)求來獲取文件，解析文件，并將其包含在樣式表中。如果我們?cè)跇邮奖碇星短琢?@import，就會(huì)妨礙渲染性能。

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

總結(jié)

最重要的是，我們不需要寫一條JavaScript語(yǔ)句就能獲得所有的性能。

來源：https://blog.bitsrc.io/improve-page-rendering-speed-using-only-css-a61667a16b2
作者：Rumesh Eranga Hapuarachchi

粉絲福利

148期留言+在看幸運(yùn)用戶：暫無。

臨走前留下，今天的福利

• 福利1：《MongoDB 4.0從入門到達(dá)人》獲取資源請(qǐng)?jiān)诠娞?hào)對(duì)話框中回復(fù)關(guān)鍵字：043，如果沒有關(guān)注請(qǐng)掃下面的二維碼。更多福利資料請(qǐng)查看公眾號(hào)菜單
• 福利2：在看+留言，我隨機(jī)抽取一位認(rèn)真留言的小伙伴，給他發(fā)一個(gè)紅包獎(jiǎng)勵(lì)

最近文章