要優(yōu)化更快的網(wǎng)站的CSS，請(qǐng)首先縮小並組合CSS文件以減少大小和HTTP請(qǐng)求。其次，通過避免資格過高和深層嵌套來使用有效的選擇器。第三，通過將基本樣式和非關(guān)鍵CSS加載不同步來利用關(guān)鍵CSS。第四，用珀格斯或鍍鉻devtools等工具刪除未使用的CSS。這些步驟可以提高負(fù)載時(shí)間，渲染性能和用戶體驗(yàn)而無需犧牲可維護(hù)性。

在快速製作網(wǎng)站時(shí)，優(yōu)化CSS通常會(huì)被忽略，但影響力令人難以置信。乾淨(jìng)，高效的CSS可以減少加載時(shí)間，提高渲染性能並使您的網(wǎng)站感到更挑剔，尤其是在移動(dòng)或較慢的連接上。

這是在不犧牲可維護(hù)性或設(shè)計(jì)質(zhì)量的情況下從CSS中獲得最大性能的方法。

縮小並組合CSS文件

加快CSS交付的最簡(jiǎn)單方法之一是減少請(qǐng)求的數(shù)量和所加載內(nèi)容的大小。

• 縮小刪除不必要的字符，例如空格，評(píng)論和銷售折斷。
• 將多個(gè)CSS文件組合到一個(gè)文件中會(huì)減少HTTP請(qǐng)求（或保存過多地依靠@import ，可以阻止渲染）。

大多數(shù)構(gòu)建WebPack，PostCSS甚至簡(jiǎn)單的在線縮影等工具都可以為此提供幫助。只要注意不要過度抗團(tuán)聚 - 如果您有單獨(dú)的打印樣式或較舊的瀏覽器，請(qǐng)保持隔離狀態(tài)，以便在需要時(shí)加載它們。

如果您使用的是現(xiàn)代框架，請(qǐng)檢查它是否會(huì)在構(gòu)建過程中自動(dòng)處理此操作。對(duì)於靜態(tài)站點(diǎn)，快速腳本或插件可以在部署過程中自動(dòng)化它。

使用有效的選擇器並避免資格過高

CSS選擇器似乎無害，但效率低下的選擇可以減慢渲染速度。

• 避免使用過度特定的選擇器，例如div#main-content ul.nav > li.active a
• 不要不必要地“過度資格”元素： .my-class比div.my-class更好

瀏覽器從右到左讀取選擇器。因此，諸如ul#nav li.active之類的東西使瀏覽器在使用班級(jí)或父級(jí)的任何過濾之前，請(qǐng)先檢查頁(yè)面上的每個(gè)li 。在小型項(xiàng)目中，這通常不是一個(gè)大問題，但是在大型網(wǎng)站上加起來。

盡可能堅(jiān)持上課。 ID是快速的，但並非總是必要的。如section p這樣的後代選擇器是可以的，但是除非您確實(shí)需要這種特異性，否則請(qǐng)避免深嵌套。

利用關(guān)鍵的CSS和異步加載

渲染性能比以往任何時(shí)候都重要。如果您的CSS阻止頁(yè)面快速顯示內(nèi)容，則用戶會(huì)注意到。

• 提取和內(nèi)聯(lián)關(guān)鍵的CSS - 呈現(xiàn)折疊內(nèi)容所需的最低樣式。
• 使用rel="preload"或基於JavaScript的加載等技術(shù)，將CSS的其餘部分異步加載。

諸如關(guān)鍵框架或插件之類的工具可以幫助自動(dòng)提取關(guān)鍵CSS。您也可以手動(dòng)進(jìn)行更簡(jiǎn)單的站點(diǎn)。

在中僅插入5–10KB的關(guān)鍵CSS可以消除渲染障礙資源，並使頁(yè)面感覺更快。可以將非關(guān)鍵CSS推遲到初始渲染後。

減少未使用的CSS

許多站點(diǎn)運(yùn)送從未使用的CSS。那是浪費(fèi)的數(shù)據(jù)和額外的解析時(shí)間。

• 使用Purgecss ， UNCS或Chrome DevTools的Coverage範(fàn)圍標(biāo)籤等工具來查找未使用的樣式。
• 在基於組件的應(yīng)用程序或使用大型CSS框架（如Bootstrap或tailwind）中特別有用。

例如，尾風(fēng)用戶應(yīng)始終在生產(chǎn)中運(yùn)行珀格克斯。否則，您最終會(huì)運(yùn)送數(shù)百個(gè)未使用的公用事業(yè)課程。

值得注意的是，某些框架會(huì)生成動(dòng)態(tài)類名稱或依靠運(yùn)行時(shí)邏輯 - 因此在刪除未使用的CSS後進(jìn)行徹底測(cè)試。但是對(duì)於大多數(shù)站點(diǎn)來說，修剪死亡代碼是一個(gè)可靠的勝利。

一旦您知道要重點(diǎn)關(guān)注什麼，優(yōu)化CSS就不會(huì)很難。從縮小和組合開始，清理選擇器，提取關(guān)鍵樣式並刪除未使用的代碼。這些步驟中的大多數(shù)都可以自動(dòng)化，因此您不必每次部署時(shí)都會(huì)擔(dān)心它們。

基本上就是這樣 - 設(shè)置後直接，有效且易於維護(hù)。

以上是優(yōu)化CSS的性能：技術(shù)和最佳實(shí)踐的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！