為了加快網(wǎng)頁的渲染速度并改善最終用戶體驗，請考慮以下五個 CSS 性能優(yōu)化技巧。

1. 使用內(nèi)聯(lián)樣式

如果給定樣式僅用于單個特定頁面元素(例如圖像滑塊或輪播)并且該組件僅用于站點中的少數(shù)頁面，請使用內(nèi)聯(lián)樣式而不是通用加載的 CSS 文件。這不僅會減少外部樣式表的大小，還會減少在不使用該組件的頁面上發(fā)生的 CSS 選擇器評估的數(shù)量。

2. 使用特定的樣式

不要將樣式應(yīng)用于通用選擇器、后代選擇器和頂級 HTML 元素。這樣做會觸發(fā)許多布爾評估。相反，通過選擇更細(xì)粒度的元素(例如單個類樣式)來優(yōu)化 CSS 性能。

3. 使用 WebComponents 優(yōu)化 CSS

WebComponents 是自包含的，減少了對共享 CSS 和 JavaScript 的需求，WebComponents 框架是一種相對較新的基于標(biāo)準(zhǔn)的方法，用于創(chuàng)建可重用組件，其中 JavaScript 和樣式是自包含和隔離的。當(dāng)你將組件所需的樣式保留在全局共享的 CSS 文件之外時，你不會看到對站點的其他區(qū)域的性能影響，因為未使用的樣式應(yīng)用程序會不必要地消耗時鐘周期。

4. 拆分你的 CSS 文件

如果你的許多 CSS 文件是針對特定瀏覽器或設(shè)備定制的，請將這些樣式分解為多個 CSS 文件。在運行時，僅加載必要的那些。

這個 CSS 性能優(yōu)化技巧將需要一些客戶端 JavaScript 或服務(wù)器端處理來完成，但對用戶的好處將值得付出額外的努力。

例如，如果移動和桌面呈現(xiàn)顯著不同，這可能會在每種設(shè)備類型上將文檔對象模型 (DOM) 評估的數(shù)量減少 50%。

5. 減小 DOM 的大小

用于拆分 CSS 文件的技巧也可用于減小 DOM 的大小。

另一個 CSS 性能優(yōu)化技巧類似于將 CSS 文件拆分為多個特定于設(shè)備的文件。相反，你還可以縮小網(wǎng)頁本身的大小，減少 HTML 中 DOM 元素的數(shù)量，從而加快客戶端渲染速度。

但是，處理 CSS 的問題不僅在于需要應(yīng)用于頁面的樣式數(shù)量，還在于實際頁面上的 DOM 元素數(shù)量。許多采用響應(yīng)式設(shè)計的現(xiàn)代網(wǎng)頁會在每個頁面請求上加載 HTML 源代碼，以實現(xiàn)移動和桌面體驗。相反，使用客戶端 JavaScript 甚至服務(wù)器端技術(shù)來確保不會將多余的 HTML 加載到永遠不會使用它的頁面上。這可以顯著減少 DOM 大小以及頁面需要經(jīng)過的樣式表評估次數(shù)。

樣式表是現(xiàn)代網(wǎng)站開發(fā)人員最好的朋友，但它們通常會帶來隱藏的性能成本。遵循這五個 CSS 性能優(yōu)化建議，減少 CSS 選擇器成為網(wǎng)站性能瓶頸的可能性。想往前端發(fā)展的小伙伴建議參加Web前端培訓(xùn)來學(xué)習(xí)前端技術(shù)，有系統(tǒng)規(guī)范的課程，有經(jīng)驗豐富的專業(yè)講師面授指導(dǎo)教學(xué)，能在短時間內(nèi)學(xué)有所成。