css如何提高頁面渲染速度的CSS技巧=

這篇文章主要介紹css如何提高頁面渲染速度的CSS技巧=，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

1. Content-visibility

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

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

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

下一步，您可以向所有卡添加 content-visibility 。

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

正如你所看到的，內(nèi)容可見性是相當(dāng)強(qiáng)大的，對(duì)提高頁面渲染時(shí)間非常有用。根據(jù)我們目前所討論的東西，你一定是把它當(dāng)成了頁面渲染的銀彈。

content-visibility 的限制

然而，有幾個(gè)領(lǐng)域的內(nèi)容可視性不佳。我想強(qiáng)調(diào)兩點(diǎn)，供大家參考。

• 此功能仍處于試驗(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)行。

為了解決滾動(dòng)條的問題，你可以使用另一個(gè)叫做 contain-intrinsic-size 的 CSS 屬性。它指定了一個(gè)元素的自然大小，因此，元素將以給定的高度而不是0px呈現(xiàn)。

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

然而，在實(shí)驗(yàn)時(shí)，我注意到，即使使用 conta-intrinsic-size，如果我們有大量的元素， content-visibility 設(shè)置為 auto ，你仍然會(huì)有較小的滾動(dòng)條問題。

因此，我的建議是規(guī)劃你的布局，將其分解成幾個(gè)部分，然后在這些部分上使用內(nèi)容可見性，以獲得更好的滾動(dòng)條行為。

2. Will-change 屬性

瀏覽器上的動(dòng)畫并不是一件新鮮事。通常情況下，這些動(dòng)畫是和其他元素一起定期渲染的。不過，現(xiàn)在瀏覽器可以使用GPU來優(yōu)化其中的一些動(dòng)畫操作。

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

下面發(fā)生的事情是，瀏覽器將為該元素創(chuàng)建一個(gè)單獨(dú)的層。之后，它將該元素的渲染與其他優(yōu)化一起委托給GPU。這將使動(dòng)畫更加流暢，因?yàn)镚PU加速接管了動(dòng)畫的渲染。

考慮以下CSS類：

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

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

當(dāng)在瀏覽器中渲染上述片段時(shí)，它將識(shí)別 will-change 屬性并優(yōu)化未來與不透明度相關(guān)的變化。

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

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

雖然 will-change 的目的是為了提高性能，但如果你濫用它，它也會(huì)降低Web應(yīng)用的性能。

• 使用 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)。

最后需要注意的是，建議在完成所有動(dòng)畫后，將元素的 will-change 刪除。

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

今天，許多Web應(yīng)用必須滿足多種形式的需求，包括PC、平板電腦和手機(jī)等。為了完成這種響應(yīng)式的特性，我們必須根據(jù)媒體尺寸編寫新的樣式。當(dāng)涉及頁面渲染時(shí)，它無法啟動(dòng)渲染階段，直到 CSS對(duì)象模型（CSSOM）已準(zhǔn)備就緒。根據(jù)你的Web應(yīng)用，你可能會(huì)有一個(gè)大的樣式表來滿足所有設(shè)備的形式因素。

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

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

將其分解為多個(gè)樣式表后：

<!-- 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" />

如您所見，根據(jù)樣式因素分解樣式表可以減少渲染阻止時(shí)間。

4.避免@import包含多個(gè)樣式表

通過 @import，我們可以在另一個(gè)樣式表中包含一個(gè)樣式表。當(dāng)我們?cè)谔幚硪粋€(gè)大型項(xiàng)目時(shí)，使用 @import 可以使代碼更加簡(jiǎn)潔。

關(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");

與使用 @import 相比，我們可以通過多個(gè) link 來實(shí)現(xiàn)同樣的功能，但性能要好得多，因?yàn)樗试S我們并行加載樣式表。

總結(jié)

除了我們?cè)诒疚闹杏懻摰?個(gè)方面，我們還有一些其他的方法可以使用CSS來提高網(wǎng)頁的性能。CSS最近的一個(gè)特性：content-visibility，在未來的幾年里看起來是如此的有前途，因?yàn)樗o頁面渲染帶來了數(shù)倍的性能提升。

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

以上是“css如何提高頁面渲染速度的CSS技巧=”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！