使用CSS就可以提高頁(yè)面渲染速度的技巧有哪些

本篇內(nèi)容介紹了“使用CSS就可以提高頁(yè)面渲染速度的技巧有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1. Content-visibility

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

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

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

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

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

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

content-visibility 的限制

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

• 此功能仍處于試驗(yàn)階段。截至目前，F(xiàn)irefox(PC和Android版本)、IE(我認(rèn)為他們沒(méi)有計(jì)劃在IE中添加這個(gè)功能)和，Safari(Mac和iOS)不支持內(nèi)容可見(jiàn)性。

• 與滾動(dòng)條行為有關(guān)的問(wè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)條的問(wèn)題，你可以使用另一個(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)條問(wèn)題。

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

2. Will-change 屬性

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

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

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

考慮以下CSS類(lèi)：

// 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)化未來(lái)與不透明度相關(guān)的變化。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

“使用CSS就可以提高頁(yè)面渲染速度的技巧有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！