當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

仅使用CSS提高页面渲染速度

發(fā)布時間：2024/1/1 CSS 60 豆豆

生活随笔收集整理的這篇文章主要介紹了仅使用CSS提高页面渲染速度小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

用戶在訪問一個Web網(wǎng)站（頁面）或應(yīng)用時，總是希望它的加載速度快，功能流暢。如果過于慢，用戶就很有可能失去耐心而離開你的Web網(wǎng)站或應(yīng)用。作為開發(fā)人員，給自己應(yīng)用提供更快的訪問速度，提供很好的用戶體驗(yàn)是必備的基礎(chǔ)技能，而且Web開發(fā)者在開發(fā)中也可以做很多事情來改善用戶體驗(yàn)。那我們今天就來和大家聊聊，在CSS方面有哪些技巧可以幫助我們來提高Web頁面的渲染速度。

內(nèi)容可見性（content-visibility）

一般來說，大多數(shù)Web應(yīng)用都有復(fù)雜的UI元素，而且有的內(nèi)容會在設(shè)備可視區(qū)域之外（內(nèi)容超出了用戶瀏覽器可視區(qū)域），比如下圖中紅色區(qū)域就在手機(jī)設(shè)備屏幕可視區(qū)域之外：

在這種場合下，我們可以使用CSS的content-visibility來跳過屏幕外的內(nèi)容渲染。也就是說，如果你有大量的離屏內(nèi)容（Off-screen Content），這將會大幅減少頁面渲染時間。

這個功能是CSS新增的特性，隸屬于 W3C 的 CSS Containment Module Level 2 模塊。也是對提高渲染性能影響最大的功能之一。content-visibility可以接受visible、auto和hidden三個屬性值，但我們可以在一個元素上使用content-visibility:auto來直接的提升頁面的渲染性能。

假設(shè)我們有一個像下面的頁面，整個頁面有個卡片列表，大約有375張，大約在屏幕可視區(qū)域能顯示12張卡片。正如下圖所示，渲染這個頁面瀏覽器用時大約1037ms：

你可以給所有卡片添加content-visibility：

.card {content-visibility: auto; }

所有卡片加入content-visibility樣式之后，頁面的渲染時間下降到150ms，差不多提高了六倍的渲染性能：

正如你所看到的，content-visibility非常強(qiáng)大，提高頁面渲染非常有用。換然話說，有了CSS的content-visibility屬性，影響瀏覽器的渲染過程就變得更加容易。本質(zhì)上，這個屬性 改變了一個元素的可見性，并管理其渲染狀態(tài)。

content-visibility有點(diǎn)類似于CSS的display和visibility屬性，然而，content-visibility的操作方式與這些屬性不同。

content-visibility的關(guān)鍵能力是，它允許我們推遲我們選擇的HTML元素渲染。默認(rèn)情況之下，瀏覽器會渲染DOM樹內(nèi)所有可以被用戶查看的元素。用戶可以看到視窗可視區(qū)域中所有元素，并通過滾動查看頁面內(nèi)其他元素。一次渲染所有的元素（包括視窗可視區(qū)域之外不可見的HTML元素）可以讓瀏覽器正確計算頁面的尺寸，同時保持整個頁面的布局和滾動條的一致性。

如果瀏覽器不渲染頁面內(nèi)的一些元素，滾動將是一場噩夢，因?yàn)闊o法正確計算頁面高度。這是因?yàn)?#xff0c;content-visibility會將分配給它的元素的高度（height）視為0，瀏覽器在渲染之前會將這個元素的高度變?yōu)?，從而使我們的頁面高度和滾動變得混亂。但如果已經(jīng)為元素或其子元素顯式設(shè)置了高度，那這種行為就會被覆蓋。如果你的元素中沒顯式設(shè)置高度，并且因?yàn)轱@式設(shè)置height可能會帶來一定的副作用而沒設(shè)置，那么我們可以使用contain-intrinsic-size來確保元素的正確渲染，同時也保留延遲渲染的好處。

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

這也意味著它將像有一個“固有尺寸”（Intrinsic-size）的單一子元素一樣布局，確保你沒設(shè)置尺寸的div（示例中的.card）仍然占據(jù)空間。contain-intrinsic-size作為一個占位符尺寸來替代渲染內(nèi)容。

雖然contain-intrinsic-size能讓元素有一個占位空間，但如果有大量的元素都設(shè)置了content-visibility: auto，滾動條仍然會有較小的問題。

content-visibility提供的另外兩個值visible和hidden可以讓我們實(shí)現(xiàn)像元素的顯式和隱藏，類似于display的none和非none值的切換：

在這種情況下，content-visibility可以提高頻繁顯示或隱藏的元素的渲染性能，例如模態(tài)框的顯示和隱藏。content-visibility可以提供這種性能提升，這要?dú)w功于其隱藏值（hidden）的功能與其他值的不同：

display: none：隱藏元素并破壞其渲染狀態(tài)。這意味著取消隱藏元素與渲染具有相同內(nèi)容的新元素一樣昂貴
visibility: hidden：隱藏元素并保持其渲染狀態(tài)。這并不能真正從文檔中刪除該元素，因?yàn)樗?#xff08;及其子樹）仍占據(jù)頁面上的幾何空間，并且仍然可以單擊。它也可以在需要時隨時更新渲染狀態(tài)，即使隱藏也是如此
content-visibility: hidden：隱藏元素并保留其渲染狀態(tài)。這意味著該元素隱藏時行為和display: none一樣，但再次顯示它的成本要低得多

content-visibility屬性的擴(kuò)展閱讀：

content-visibility: the new CSS property that boosts your rendering performance
More on content-visibility

合理使用will-change

CSS渲染器（CSS Renderer）在渲染CSS樣式之前需要一個準(zhǔn)備過程，因?yàn)橛行〤SS屬性需要CSS渲染器事先做很多準(zhǔn)備才能實(shí)現(xiàn)渲染。這就很容易導(dǎo)致頁面出現(xiàn)卡頓，給用戶帶來不好的體驗(yàn)。

比如Web上的動效，通常情況之下，Web動畫（在動的元素）是和其他元素一起定期渲染的，以往在動畫開發(fā)時，會使用CSS的3D變換（transform中的translate3d()或translateZ()）來開啟GPU加速，讓動畫變得更流暢，但這樣做是一種黑魔法，會將元素和它的上下文提到另一個“層”，獨(dú)立于其他元素被渲染?？蛇@種將元素提取到一個新層，相對來說代價也是昂貴的，這可能會使transform動畫延遲幾百毫秒。

不過，現(xiàn)在我可以不使用transform這樣的Hack手段來開啟GPU加速，可以直接使用CSS的will-change屬性，該屬性可以表明元素將修改特定的屬性，讓瀏覽器事先進(jìn)行必要的優(yōu)化。也就是說，will-change是一個UA提示，它不會對你使用它的元素產(chǎn)生任何樣式上的影響。但值得注意的是，如果創(chuàng)建了新的層疊上下文，它可以產(chǎn)生外觀效果。

比如下面這樣的一個動畫示例：

<div class="animate"></div>/* CSS */ .animate {will-change: opacity }

瀏覽器渲染上面的代碼時，瀏覽器將為該元素創(chuàng)建一個單獨(dú)的層。之后，它將該元素的渲染與其他優(yōu)化一起委托給GPU，即，瀏覽器會識別will-change屬性，并優(yōu)化未來與不透明相關(guān)的變化。這將使動畫變得更加流暢，因?yàn)镚PU加速接管了動畫的渲染。

根據(jù)?@Maximillian Laumeister?所做的性能基準(zhǔn)，可以看到，他通過這種單行變化獲得了超過120FPS的渲染速度，和最初的渲染速度（大約50FPS）相比，提高70FPS左右。

will-change的使用并不復(fù)雜，它能接受的值有：

auto：默認(rèn)值，瀏覽器會根據(jù)具體情況，自行進(jìn)行優(yōu)化
scroll-position：表示開發(fā)者將要改變元素的滾動位置，比如瀏覽器通常僅渲染可滾動元素“滾動窗口”中的內(nèi)容。而某些內(nèi)容超過該窗口（不在瀏覽器的可視區(qū)域內(nèi)）。如果will-change顯式設(shè)置了該值，將擴(kuò)展渲染“滾動窗口”周圍的內(nèi)容，從而順利地進(jìn)行更長，更快的滾動（讓元素的滾動更流暢）
content：表示開發(fā)者將要改變元素的內(nèi)容，比如瀏覽器常將大部分不經(jīng)常改變的元素緩存下來。但如果一個元素的內(nèi)容不斷發(fā)生改變，那么產(chǎn)生和維護(hù)這個緩存就是在浪費(fèi)時間。如果will-change顯式設(shè)置了該值，可以減少瀏覽器對元素的緩存，或者完全避免緩存。變?yōu)閺氖贾两K都重新渲染元素。使用該值時需要盡量在文檔樹最末尾上使用，因?yàn)樵撝禃粦?yīng)用到它所聲明元素的子節(jié)點(diǎn)，要是在文檔樹較高的節(jié)點(diǎn)上使用的話，可能會對頁面性能造成較大的影響
<custom-ident>：表示開發(fā)者將要改變的元素屬性。如果給定的值是縮寫，則默認(rèn)被擴(kuò)展全，比如，will-change設(shè)置的值是padding，那么會補(bǔ)全所有padding的屬性，如 will-change: padding-top, padding-right, padding-bottom, padding-left;

詳細(xì)的使用，請參閱：

CSS Will Change Module Level 1
Everything You Need to Know About the CSS will-change Property
CSS Reference：will-change

雖然說will-change能提高性能，但這個屬性應(yīng)該被認(rèn)為是最后的手段，它不是為了過早的優(yōu)化。只有消退你必須處理性能問題時，你才應(yīng)該使用它。如果你濫用的話，反而會降低Web的性能。比如：

使用will-change表示該元素在未來會發(fā)生變化。

因此，如果你試圖將will-change和動畫同時使用，它將不會給你帶來優(yōu)化。因此，建議在父元素上使用will-change，在子元素上使用動畫。

.animate-element-parent {will-change: opacity; }.animate-element {transition: opacity .2s linear }

?不要使用非動畫元素。

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

除此之外，要用好will-change也不是件易事，MDN在這方面做出了相應(yīng)的描述：

不要將 will-change 應(yīng)用到太多元素上：瀏覽器已經(jīng)盡力嘗試去優(yōu)化一切可以優(yōu)化的東西了。有一些更強(qiáng)力的優(yōu)化，如果與 will-change 結(jié)合在一起的話，有可能會消耗很多機(jī)器資源，如果過度使用的話，可能導(dǎo)致頁面響應(yīng)緩慢或者消耗非常多的資源。比如 *{will-change: transform, opacity;}
有節(jié)制地使用：通常，當(dāng)元素恢復(fù)到初始狀態(tài)時，瀏覽器會丟棄掉之前做的優(yōu)化工作。但是如果直接在樣式表中顯式聲明了 will-change 屬性，則表示目標(biāo)元素可能會經(jīng)常變化，瀏覽器會將優(yōu)化工作保存得比之前更久。所以最佳實(shí)踐是當(dāng)元素變化之前和之后通過腳本來切換 will-change 的值
不要過早應(yīng)用 will-change 優(yōu)化：如果你的頁面在性能方面沒什么問題，則不要添加 will-change 屬性來榨取一丁點(diǎn)的速度。 will-change 的設(shè)計初衷是作為最后的優(yōu)化手段，用來嘗試解決現(xiàn)有的性能問題。它不應(yīng)該被用來預(yù)防性能問題。過度使用 will-change 會導(dǎo)致大量的內(nèi)存占用，并會導(dǎo)致更復(fù)雜的渲染過程，因?yàn)闉g覽器會試圖準(zhǔn)備可能存在的變化過程。這會導(dǎo)致更嚴(yán)重的性能問題。
給它足夠的工作時間：這個屬性是用來讓頁面開發(fā)者告知瀏覽器哪些屬性可能會變化的。然后瀏覽器可以選擇在變化發(fā)生前提前去做一些優(yōu)化工作。所以給瀏覽器一點(diǎn)時間去真正做這些優(yōu)化工作是非常重要的。使用時需要嘗試去找到一些方法提前一定時間獲知元素可能發(fā)生的變化，然后為它加上 will-change 屬性。

最后需要注意的是，建議在完成所有動畫后，將元素的will-change刪除。下面這個示例展示如何使用腳本正確地應(yīng)用 will-change 屬性的示例，在大部分的場景中，你都應(yīng)該這樣做。

var el = document.getElementById('element');// 當(dāng)鼠標(biāo)移動到該元素上時給該元素設(shè)置 will-change 屬性 el.addEventListener('mouseenter', hintBrowser); // 當(dāng) CSS 動畫結(jié)束后清除 will-change 屬性 el.addEventListener('animationEnd', removeHint);function hintBrowser() {// 填寫上那些你知道的，會在 CSS 動畫中發(fā)生改變的 CSS 屬性名們this.style.willChange = 'transform, opacity'; }function removeHint() {this.style.willChange = 'auto'; }

在實(shí)際使用will-change可以記作以下幾個規(guī)則，即 五可做，三不可做：

在樣式表中少用will-change
給will-change足夠的時間令其發(fā)揮該有的作用
使用<custom-ident>來針對超特定的變化（如，left, opacity等）
如果需要的話，可以JavaScript中使用它（添加和刪除）
修改完成后，刪除will-change
不要同時聲明太多的屬性
不要應(yīng)用在太多元素上
不要把資源浪費(fèi)在已停止變化的元素上

讓元素及其內(nèi)容盡可能獨(dú)立于文檔樹的其余部分（contain）

W3C的CSS Containment Module Level 2除了提供前面介紹的content-visibility屬性之外，還有另一個屬性contain。該屬性允許我們指定特定的DOM元素和它的子元素，讓它們能夠獨(dú)立于整個DOM樹結(jié)構(gòu)之外。目的是能夠讓瀏覽器有能力只對部分元素進(jìn)行重繪、重排，而不必每次針對整個頁面。即，允許瀏覽器針對DOM的有限區(qū)域而不是整個頁面重新計算布局，樣式，繪畫，大小或它們的任意組合。

在實(shí)際使用的時候，我們可以通過contain設(shè)置下面五個值中的某一個來規(guī)定元素以何種方式獨(dú)立于文檔樹：

layout ：該值表示元素的內(nèi)部布局不受外部的任何影響，同時該元素以及其內(nèi)容也不會影響以上級
paint ：該值表示元素的子級不能在該元素的范圍外顯示，該元素不會有任何內(nèi)容溢出（或者即使溢出了，也不會被顯示）
size ：該值表示元素盒子的大小是獨(dú)立于其內(nèi)容，也就是說在計算該元素盒子大小的時候是會忽略其子元素
content ：該值是contain: layout paint的簡寫
strict ：該值是contain: layout paint size的簡寫

在上述這幾個值中，size、layout和paint可以單獨(dú)使用，也可以相互組合使用；另外content和strict是組合值，即content是layout paint的組合，strict是layout paint size的組合。

contain的size、layout和paint提供了不同的方式來影響瀏覽器渲染計算：

size：告訴瀏覽器，當(dāng)其內(nèi)容發(fā)生變化時，該容器不應(yīng)導(dǎo)致頁面上的位置移動
layout：告訴瀏覽器，容器的后代不應(yīng)該導(dǎo)致其容器外元素的布局改變，反之亦然
paint：告訴瀏覽器，容器的內(nèi)容將永遠(yuǎn)不會繪制超出容器的尺寸，如果容器是模糊的，那么就根本不會繪制內(nèi)容

@Manuel Rego Casasnovas提供了一個示例，向大家闡述和演示了contain是如何提高Web頁面渲染性能。這個示例中，有10000個像下面這樣的DOM元素：

<div class="item"><div>Lorem ipsum...</div> </div>

使用JavaScript的textContent這個API來動態(tài)更改div.item > div的內(nèi)容：

如果不使用contain，即使更改是在單個元素上，瀏覽器在布局上的渲染也會花費(fèi)大量的時間，因?yàn)樗鼤闅v整個DOM樹（在本例中，DOM樹很大，因?yàn)樗?0000個DOM元素）：

在本例中，div的大小是固定的，我們在內(nèi)部div中更改的內(nèi)容不會溢出它。因此，我們可以將contain: strict應(yīng)用到項目上，這樣當(dāng)項目內(nèi)部發(fā)生變化時，瀏覽器就不需要訪問其他節(jié)點(diǎn)，它可以停止檢查該元素上的內(nèi)容，并避免到外部去。

盡管這個例子中的每一項都很簡單，但通過使用contain，Web性能得到很大的改變，從~4ms降到了~0.04ms，這是一個巨大的差異。想象一下，如果DOM樹具有非常復(fù)雜的結(jié)構(gòu)和內(nèi)容，但只修改了頁面的一小部分，如果可以將其與頁面的其他部分隔離開來，那么將會發(fā)生什么情況呢？

有關(guān)于contain的更多內(nèi)容：

Let’s Take a Deep Dive Into the CSS Contain Property
Helping Browsers Optimize With The CSS Contain Property
CSS contain Property

使用font-display解決由于字體造成的布局偏移（FOUT）

在Web開發(fā)的過程中，難免會使用@font-face技術(shù)引用一些特殊字體（系統(tǒng)沒有的字體），同時也可能會配合變量字體特性，使用更具個性化的字體。

使用@font-face加載字體策略大概如下圖所示：

上圖來自于@zachleat的《A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES》一文。

Web中使用非系統(tǒng)字體（@font-face規(guī)則引入的字體）時，瀏覽器可能沒有及時得到Web字體，就會讓它用后備系統(tǒng)字體渲染，然后優(yōu)化我們的字體。這個時候很容易引起未編排(Unstyled)的文本引起閃爍，整個排版本布局也看上去會偏移一下（FOUT）。

幸運(yùn)的是，根據(jù)@font-face規(guī)則，font-display屬性定義了瀏覽器如何加載和顯示字體文件，允許文本在字體加載或加載失敗時顯示回退字體?？梢酝ㄟ^依靠折中無樣式文本閃現(xiàn)使文本可見替代白屏來提高性能。

CSS的font-display屬性有五個不同的值：

auto ：默認(rèn)值。典型的瀏覽器字體加載的行為會發(fā)生，也就是使用自定義字體的文本會先被隱藏，直到字體加載結(jié)束才會顯示。即字體展示策略與瀏覽器一致，當(dāng)前，大多數(shù)瀏覽器的默認(rèn)策略類似block
block ：給予字體一個較短的阻塞時間（大多數(shù)情況下推薦使用 3s）和無限大的交換時間。換言之，如果字體未加載完成，瀏覽器將首先繪制“隱形”文本；一旦字體加載完成，立即切換字體。為此，瀏覽器將創(chuàng)建一個匿名字體，其類型與所選字體相似，但所有字形都不含“墨水”。使用特定字體渲染文本之后頁面方才可用，只有這種情況下才應(yīng)該使用 block。
swap ：使用 swap，則阻塞階段時間為 0，交換階段時間無限大。也就是說，如果字體沒有完成加載，瀏覽器會立即繪制文字，一旦字體加載成功，立即切換字體。與 block 類似，如果使用特定字體渲染文本對頁面很重要，且使用其他字體渲染仍將顯示正確的信息，才應(yīng)使用 swap。
fallback ：這個可以說是auto和swap的一種折中方式。需要使用自定義字體渲染的文本會在較短的時間不可見，如果自定義字體還沒有加載結(jié)束，那么就先加載無樣式的文本。一旦自定義字體加載結(jié)束，那么文本就會被正確賦予樣式。使用 fallback時，阻塞階段時間將非常小（多數(shù)情況下推薦小于 100ms），交換階段也比較短（多數(shù)情況下建議使用 3s）。換言之，如果字體沒有加載，則首先會使用后備字體渲染。一旦加載成功，就會切換字體。但如果等待時間過久，則頁面將一直使用后備字體。如果希望用戶盡快開始閱讀，而且不因新字體的載入導(dǎo)致文本樣式發(fā)生變動而干擾用戶體驗(yàn)，fallback 是一個很好的選擇。
optional ：效果和fallback幾乎一樣，都是先在極短的時間內(nèi)文本不可見，然后再加載無樣式的文本。不過optional選項可以讓瀏覽器自由決定是否使用自定義字體，而這個決定很大程度上取決于瀏覽器的連接速度。如果速度很慢，那你的自定義字體可能就不會被使用。使用 optional 時，阻塞階段時間會非常小（多數(shù)情況下建議低于 100ms），交換階段時間為 0。

下面是使用swap值的一個例子：

@font-face {font-family: "Open Sans Regular";font-weight: 400;font-style: normal;src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2");font-display: swap; }

在這個例子里我們通過只使用WOFF2文件來縮寫字體。另外我們使用了swap作為font-display的值，頁面的加載情況將如下圖所示：

注意，font-display一般放在@font-face規(guī)則中使用。

有關(guān)于字體加載和font-display更多的介紹，可以閱讀：

A deep dive into webfonts
How to avoid layout shifts caused by web fonts
The Best Font Loading Strategies and How to Execute Them
A font-display setting for slow connections
How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy
The importance of @font-face source order when used with preload
The Fastest Google Fonts
A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES

scroll-behavior讓滾動更流暢

早前在滾動的特性和改變用戶體驗(yàn)的滾動新特性中向大家介紹了幾個可以用來改變用戶體驗(yàn)的滾動特性，比如滾動捕捉、overscroll-behavior和scroll-behavior。

scroll-behavior是CSSOM View Module提供的一個新特性，可以輕易的幫助我們實(shí)現(xiàn)絲滑般的滾動效果。該屬性可以為一個滾動框指定滾動行為，其他任何的滾動，例如那些由于用戶行為而產(chǎn)生的滾動，不受這個屬性的影響。

scroll-behavior接受兩個值：

auto ：滾動框立即滾動
smooth ：滾動框通過一個用戶代理定義的時間段使用定義的時間函數(shù)來實(shí)現(xiàn)平穩(wěn)的滾動，用戶代理平臺應(yīng)遵循約定，如果有的話

除此之外，其還有三個全局的值：inherit、initial和unset。

使用起來很簡單，只需要這個元素上使用scroll-behavior:smooth。因此，很多時候?yàn)榱俗岉撁鏉L動更平滑，建議在html中直接這樣設(shè)置一個樣式：

html {scroll-behavior:smooth; }

口說無憑，來看個效果對比，你會有更好的感覺：

有關(guān)于scroll-behavior屬性更多的介紹可以再花點(diǎn)時間閱讀下面這些文章：

CSSOM View Module:scroll-behavior
CSS-Tricks: scroll-behavior
Native Smooth Scroll behavior
PAGE SCROLLING IN VANILLA JAVASCRIPT
smooth scroll behavior polyfill

開啟GPU渲染動畫

瀏覽器針對處理CSS動畫和不會很好地觸發(fā)重排（因此也導(dǎo)致繪）的動畫屬性進(jìn)行了優(yōu)化。為了提高性能，可以將被動畫化的節(jié)點(diǎn)從主線程移到GPU上。將導(dǎo)致合成的屬性包括 3D transforms (transform: translateZ(), rotate3d()，等)，animating， transform 和 opacity, position: fixed，will-change，和 filter。一些元素，例如 <video>, <canvas> 和 <iframe>，也位于各自的圖層上。將元素提升為圖層（也稱為合成）時，動畫轉(zhuǎn)換屬性將在GPU中完成，從而改善性能，尤其是在移動設(shè)備上。

減少渲染阻止時間

今天，許多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)先級方式下載。

將其分解為多個樣式表后：

<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" /> 復(fù)制代碼

默認(rèn)情況下，瀏覽器假設(shè)每個指定的樣式表都是阻塞渲染的。通過添加 media屬性附加媒體查詢，告訴瀏覽器何時應(yīng)用樣式表。當(dāng)瀏覽器看到一個它知道只會用于特定場景的樣式表時，它仍會下載樣式，但不會阻塞渲染。通過將 CSS 分成多個文件，主要的阻塞渲染文件（本例中為 styles.css）的大小變得更小，從而減少了渲染被阻塞的時間。

避免@import包含多個樣式表

通過 @import，我們可以在另一個樣式表中包含一個樣式表。當(dāng)我們在處理一個大型項目時，使用 @import 可以使代碼更加簡潔。

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

/* style.css */ @import url("windows.css");/* windows.css */ @import url("componenets.css"); 復(fù)制代碼

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

注意動態(tài)修改自定義屬性方式

CSS自定義屬性又名CSS變量，該特性已經(jīng)是非常成熟的特性了，可以在Web的開發(fā)中大膽的使用該特性：

:root { --color: red; }button {color: var(--color); } 復(fù)制代碼

在使用CSS自定義屬性時，時常在root（根元素）上注冊自定義屬性，這種方式注冊的自定義屬性是個全局的自定義屬性（全局變量），可以被所有嵌套的子元素繼承。就上例而言，--color屬性允許任何button樣式將其作為變量使用。

熟悉CSS自定義屬性的同學(xué)都知道，可以使用style.setProperty來重新設(shè)置已注冊好的自定義屬性的值。但在修改根自定義屬性時，需要注意，因?yàn)樗鼤绊慦eb的性能。早在2017年@Lisi Linhart 在《Performance of CSS Variables》中闡述過。

在使用CSS變量時，我們總是要注意我們的變量是在哪個范圍內(nèi)定義的，如果改變它，將影響許多子代，從而產(chǎn)生大量的樣式重新計算。
結(jié)合CSS變量使用calc()是一個很好的方法，可以獲得更多的靈活性，限制我們需要定義的變量數(shù)量。在不同的瀏覽器中測試calc()與CSS變量的結(jié)合，并沒有發(fā)現(xiàn)任何大的性能問題。然而在一些瀏覽器中對一些單位的支持還是有限的，比如deg或ms，所以我們必須記住這一點(diǎn)。
如果我們比較一下在JavaScript中通過內(nèi)聯(lián)樣式設(shè)置變量與setProperty方法的性能標(biāo)志，瀏覽器之間有一些明顯的差異。在Safari中通過內(nèi)聯(lián)樣式設(shè)置屬性的速度非?？?#xff0c;而在Firefox中則非常慢，所以使用setProperty設(shè)置變量是首選

有關(guān)于這方面的具體細(xì)節(jié)就不在這闡述了，如果你對這方面感興趣的話，可以閱讀下面這幾篇文章：

Performance of CSS Variables
Control CSS loading with custom properties
CSS Custom Properties performance in 2018
Improving CSS Custom Properties performance

小結(jié)

可能很多人會說，5G已到來，終端設(shè)備性能越來越好，網(wǎng)絡(luò)環(huán)境也越來越強(qiáng)，Web性能已不是問題了，但事實(shí)上在Web開發(fā)過程中總是難免碰到性能是的問題。而且我們?yōu)橛脩籼峁└鲿车捏w驗(yàn)也是我們必備技術(shù)之一。時至今日，優(yōu)化Web性能的方式和手段很多，但在開發(fā)時注重每個細(xì)節(jié)，可以讓我們把性能做得更好。正如文章中提到這些。

除了文章提到的這幾個點(diǎn)，還有一些其他的方法可以使用CSS來提高網(wǎng)頁的性能。當(dāng)然，文章中提到的一些特性還沒有得到所有瀏覽器支持，比如content-visibility、contain等，但在未來它們肯定能讓頁面渲染帶來更快的渲染。另外，文章中提到的一些技巧并沒有深入闡述，比如CSS的引用方式，CSS的阻塞等。

如果大家覺得不錯的話，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)???~

可以獲取PDF書籍源碼、教程等給大家免費(fèi)使用點(diǎn)擊鏈接加入【web前端技術(shù)】:jq.qq.com/?_wv=1027&k…

總結(jié)

以上是生活随笔為你收集整理的仅使用CSS提高页面渲染速度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。