本篇內(nèi)容介紹了“使用CSS就可以提高頁面渲染速度的技巧有哪些”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
康樂網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),康樂網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為康樂上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的康樂做網(wǎng)站的公司定做！
1. Content-visibility
一般來說，大多數(shù)Web應(yīng)用都有復(fù)雜的UI元素，它的擴(kuò)展范圍超出了用戶在瀏覽器視圖中看到的內(nèi)容。在這種情況下，我們可以使用內(nèi)容可見性( content-visibility )來跳過屏幕外內(nèi)容的渲染。如果你有大量的離屏內(nèi)容，這將大大減少頁面渲染時間。
這個功能是最新增加的功能之一，也是對提高渲染性能影響最大的功能之一。雖然 content-visibility 接受幾個值，但我們可以在元素上使用 content-visibility: auto; 來獲得直接的性能提升。
讓我們考慮一下下面的頁面，其中包含許多不同信息的卡片。雖然大約有12張卡適合屏幕，但列表中大約有375張卡。正如你所看到的，瀏覽器用了1037ms來渲染這個頁面。
下一步，您可以向所有卡添加 content-visibility 。
在這個例子中，在頁面中加入 content-visibility 后，渲染時間下降到150ms，這是6倍以上的性能提升。
正如你所看到的，內(nèi)容可見性是相當(dāng)強(qiáng)大的，對提高頁面渲染時間非常有用。根據(jù)我們目前所討論的東西，你一定是把它當(dāng)成了頁面渲染的銀彈。
content-visibility 的限制
然而，有幾個領(lǐng)域的內(nèi)容可視性不佳。我想強(qiáng)調(diào)兩點(diǎn)，供大家參考。
此功能仍處于試驗(yàn)階段。截至目前，F(xiàn)irefox(PC和Android版本)、IE(我認(rèn)為他們沒有計(jì)劃在IE中添加這個功能)和，Safari(Mac和iOS)不支持內(nèi)容可見性。
與滾動條行為有關(guān)的問題。由于元素的初始渲染高度為0px，每當(dāng)你向下滾動時，這些元素就會進(jìn)入屏幕。實(shí)際內(nèi)容會被渲染，元素的高度也會相應(yīng)更新。這將使?jié)L動條的行為以一種非預(yù)期的方式進(jìn)行。
為了解決滾動條的問題，你可以使用另一個叫做 contain-intrinsic-size 的 CSS 屬性。它指定了一個元素的自然大小，因此，元素將以給定的高度而不是0px呈現(xiàn)。
重慶分公司
重慶分公司
.element{ content-visibility: auto; contain-intrinsic-size: 200px; }然而，在實(shí)驗(yàn)時，我注意到，即使使用 conta-intrinsic-size，如果我們有大量的元素，content-visibility 設(shè)置為 auto ，你仍然會有較小的滾動條問題。
因此，我的建議是規(guī)劃你的布局，將其分解成幾個部分，然后在這些部分上使用內(nèi)容可見性，以獲得更好的滾動條行為。
2. Will-change 屬性
瀏覽器上的動畫并不是一件新鮮事。通常情況下，這些動畫是和其他元素一起定期渲染的。不過，現(xiàn)在瀏覽器可以使用GPU來優(yōu)化其中的一些動畫操作。
通過will-change CSS屬性，我們可以表明元素將修改特定的屬性，讓瀏覽器事先進(jìn)行必要的優(yōu)化。
下面發(fā)生的事情是，瀏覽器將為該元素創(chuàng)建一個單獨(dú)的層。之后，它將該元素的渲染與其他優(yōu)化一起委托給GPU。這將使動畫更加流暢，因?yàn)镚PU加速接管了動畫的渲染。
考慮以下CSS類：
// In stylesheet .animating-element { will-change: opacity; } // In HTML Animating Child elements 當(dāng)在瀏覽器中渲染上述片段時，它將識別 will-change 屬性并優(yōu)化未來與不透明度相關(guān)的變化。
根據(jù)Maximillian Laumeister所做的性能基準(zhǔn)，可以看到他通過這個單行的改變獲得了超過120FPS的渲染速度，而最初的渲染速度大概在50FPS。
什么時候不是用will-change
雖然 will-change 的目的是為了提高性能，但如果你濫用它，它也會降低Web應(yīng)用的性能。
使用 will-change 表示該元素在未來會發(fā)生變化。因此，如果你試圖將 will-change 和動畫同時使用，它將不會給你帶來優(yōu)化。因此，建議在父元素上使用 will-change ，在子元素上使用動畫。
.my-class{ will-change: opacity; } .child-class{ transition: opacity 1s ease-in-out; }不要使用非動畫元素。當(dāng)你在一個元素上使用 will-change 時，瀏覽器會嘗試通過將元素移動到一個新的圖層并將轉(zhuǎn)換工作交給GPU來優(yōu)化它。如果您沒有任何要轉(zhuǎn)換的內(nèi)容，則會導(dǎo)致資源浪費(fèi)。
最后需要注意的是，建議在完成所有動畫后，將元素的 will-change 刪除。
3. 減少渲染阻止時間
今天，許多Web應(yīng)用必須滿足多種形式的需求，包括PC、平板電腦和手機(jī)等。為了完成這種響應(yīng)式的特性，我們必須根據(jù)媒體尺寸編寫新的樣式。當(dāng)涉及頁面渲染時，它無法啟動渲染階段，直到 CSS對象模型(CSSOM)已準(zhǔn)備就緒。根據(jù)你的Web應(yīng)用，你可能會有一個大的樣式表來滿足所有設(shè)備的形式因素。
但是，假設(shè)我們根據(jù)表單因素將其拆分為多個樣式表。在這種情況下，我們可以只讓主CSS文件阻塞關(guān)鍵路徑，并以高優(yōu)先級下載它，而讓其他樣式表以低優(yōu)先級方式下載。
將其分解為多個樣式表后：
