如何提高 CSS 性能
結合現(xiàn)代網(wǎng)站的復雜性和瀏覽器處理CSS的方式，即使是適量的CSS也會成為設備受限、網(wǎng)絡延遲、帶寬或數(shù)據(jù)限制的瓶頸。因為性能是用戶體驗的一個至關重要的部分，所以必須確保在各種形狀和尺寸的設備上提供一致的高質(zhì)量體驗，這也需要優(yōu)化你的CSS。
本篇文章將涵蓋CSS會導致哪些性能問題，以及如何制作不妨礙人們使用的CSS的最佳實踐。
目錄
- CSS是如何工作的？
- 注意CSS的大小
- 優(yōu)先考慮關鍵的CSS
- 使用高效的CSS動畫
- 使用CSS優(yōu)化字體加載
- 不用擔心CSS選擇器的速度問題。
CSS是如何工作的？
CSS阻止渲染
當一個頁面有CSS可用時，無論是內(nèi)聯(lián)還是外部樣式表，瀏覽器都會延遲渲染，直到CSS被解析。這是因為沒有CSS的頁面通常是不可用的。如果瀏覽器向你展示了一個沒有CSS的亂七八糟的頁面，然后片刻后又啪啪啪地進入了一個有樣式的頁面，不斷變化的內(nèi)容和突如其來的視覺變化會讓用戶體驗混亂。這種糟糕的用戶體驗有一個名字--Flash of Unstyled Content（FOUC）。
CSS可以阻止HTML的解析
盡管瀏覽器在完成CSS解析之前不會顯示內(nèi)容，但它會處理HTML的其余部分。然而腳本會阻止解析器，除非它們被標記為defer或async。一個腳本有可能操縱頁面和其余代碼，所以瀏覽器必須注意該腳本的執(zhí)行時間。
屏蔽腳本的解析器：腳本如何屏蔽HTML解析。
因為腳本可以影響應用到頁面的樣式，如果瀏覽器仍在處理一些CSS，它就會等到處理完畢再運行腳本。因為在腳本運行之前不會繼續(xù)解析文檔，這意味著CSS不再只是阻止渲染--取決于文檔中外部樣式表和腳本的順序，也可能停止HTML解析。
解析器阻塞CSS：CSS如何阻塞HTML解析。
為了避免阻塞解析，請盡快交付CSS，并以最佳順序安排你的資源。
注意CSS的大小
壓縮和最小化CSS
建立連接來下載外部樣式表不可避免地會造成延遲，但你可以通過最小化網(wǎng)絡傳輸?shù)目傋止?jié)來加快下載速度。
壓縮文件可以顯著提高速度，許多托管平臺和CDN都會在默認情況下對資產(chǎn)進行壓縮編碼（或者你可以輕松配置）。服務器和客戶端交互中使用最廣泛的壓縮格式是Gzip。還有Brotli，它可以提供更好的壓縮效果，盡管它不像 Gzip 那樣受到支持。
最小化是去除空白和任何不必要的代碼的過程。輸出的是一個更小但完全有效的代碼文件，瀏覽器可以解析，這將為你節(jié)省一些字節(jié)。Terser是一個流行的JavaScript壓縮工具，如果你使用webpack，v4包含一個插件來創(chuàng)建minified的構建文件。
微調(diào)：刪除未使用的CSS
在使用CSS框架的時候，最終得到未使用的 CSS 是相對常見的（除非我們只包含我們需要的組件）。同樣的問題也出現(xiàn)在長期增長的大型代碼庫中。
去除未使用的CSS通常是手工操作。主要的挑戰(zhàn)在于它有多么復雜。我們必須在所有可能的狀態(tài)下，在所有可能的設備上仔細審核整個網(wǎng)站（以覆蓋媒體查詢），并執(zhí)行所有可能改變樣式的JavaScript功能。UnusedCSS和PurifyCSS是流行的工具，可以幫助查明不必要的樣式，但我們應該配合仔細的視覺回歸測試。
在這里，使用CSS-in-JS的顯著優(yōu)勢：每個組件內(nèi)渲染的樣式都是只需要CSS。在CSS-in-JS中加快CSS的秘訣是將CSS內(nèi)聯(lián)到頁面中，或者將其提取到外部CSS文件中。將CSS發(fā)送到一個JavaScript文件中會導致它的解析和緩慢計算。
優(yōu)先考慮關鍵的CSS
關鍵的CSS是一種技術，它提取并內(nèi)嵌CSS以獲得頁面以上的內(nèi)容。在HTML文檔的 <head>中內(nèi)聯(lián)提取的樣式，無需額外請求獲取這些樣式，并加快渲染速度。
你知道嗎？Above-the-fold是指瀏覽者在滾動之前在頁面加載時看到的所有內(nèi)容。由于有許多設備和屏幕尺寸，所以沒有一個普遍定義的像素高度被認為是折疊以上的內(nèi)容。
為了最大限度地減少首次渲染的往返次數(shù)，將上述內(nèi)容保持在14KB（壓縮）以下。
確定關鍵的CSS并不完全準確，因為你需要對折疊位置進行假設（不同設備屏幕尺寸的折疊位置有所不同）。這對于高度動態(tài)的網(wǎng)站來說是很困難的。即使不精確，它仍然可以帶來性能的提升，我們可以通過Critical、CriticalCSS和Penthouse等工具自動化。
異步加載CSS
CSS的其余部分（不太關鍵的部分）最好是異步加載。實現(xiàn)的方法是將link media屬性設置為print。
- <linkrellinkrel="stylesheet"href="non-critical.css"media="print"onload="this.media='all'">
"Print"媒體類型定義了用戶試圖打印頁面時的樣式表規(guī)則，瀏覽器將在不延遲頁面渲染的情況下加載這種樣式表。當樣式表加載完成后，將該樣式表應用于所有媒體（即屏幕而不僅僅是打印），使用onload屬性將媒體設置為all。
另一種方法是使用 <linkrel="preload"> (而不是rel="styleheet")來實現(xiàn)類似的模式，并在加載事件中切換rel屬性到styleheet。在使用這種方法時，有一些缺點需要考慮。
- 瀏覽器對預加載的支持還不是很好，所以需要一個polyfill（或者使用loadCSS等庫）來跨瀏覽器應用樣式表。
- 預加載會很早地以最高優(yōu)先級獲取文件，可能會降低其他重要下載的優(yōu)先級。
如果你確實想要預加載提供的高優(yōu)先級獲取（在支持它的瀏覽器中），loadCSS的創(chuàng)建者建議你把它和第一種模式結合起來，就像這樣。
- <linkrellinkrel="preload"href="/path/to/my.css"as="style">
- <linkrellinkrel="stylesheet"href="/path/to/my.css"media="print"onload="this.media='all'">
避免在CSS文件中使用@import
在CSS文件中使用@import會降低渲染速度。首先，瀏覽器必須下載CSS文件來發(fā)現(xiàn)導入的資源，然后在渲染之前發(fā)起另一個請求來下載它。
如果你有一個包含@import url(import.css)的樣式表；網(wǎng)絡瀑布看起來像這樣。
在link元素中加載兩個樣式表，允許并行下載。
使用高效的CSS動畫
當你對頁面上的元素進行動畫處理時，瀏覽器經(jīng)常要重新計算它們在文檔中的位置和大小，從而觸發(fā)布局。例如，如果改變了一個元素的寬度，它的任何一個子元素都可能受到影響，頁面布局的很大一部分可能會改變。布局幾乎總是適用于整個文檔，所以布局樹越大，它執(zhí)行布局計算的時間就越長。
當動畫元素時，必須盡量減少布局和重繪。并非所有的CSS動畫技術都是一樣的，現(xiàn)代瀏覽器可以通過位置、比例、旋轉(zhuǎn)和不透明度來最好地創(chuàng)建性能優(yōu)異的動畫。
- 不要改變高度和寬度屬性，而是使用transform：scale()。
- 要移動元素，避免改變top、right、bottom或left屬性，而使用transform: translate()。
- 如果你想模糊背景，可以考慮使用模糊的圖像并改變其不透明度。
微調(diào)：contain屬性
contain CSS 屬性告訴瀏覽器，該元素及其子元素被認為是獨立于文檔樹的（盡可能）。它將頁面的子樹與其他部分隔離開來。這樣瀏覽器就可以優(yōu)化頁面獨立部分的渲染（樣式、布局和繪制操作）以提高性能。
contain 屬性在包含許多獨立小組件的頁面上非常有用。可以使用它來防止每個小組件內(nèi)的更改在小組件的邊界框外產(chǎn)生副作用。一個大部分是靜態(tài)的網(wǎng)站將不會從這個策略中得到什么好處。
使用CSS優(yōu)化字體加載
避免在加載字體時出現(xiàn)不可見的文字
字體通常是需要一段時間來加載大文件。一些瀏覽器會隱藏文本，直到字體加載完畢（導致 "不可見文本的閃爍 "或FOIT）來處理這個問題。在優(yōu)化速度時，你會希望避免 "不可見文本的閃爍"，并使用系統(tǒng)字體（預裝在機器上的字體）立即向人們展示內(nèi)容。一旦加載了字體文件，它就會取代被稱為 "閃現(xiàn)的不規(guī)則文本 "或FOUT的系統(tǒng)字體。
實現(xiàn)這一目標的一種方法是使用font-display--一個用于指定字體顯示策略的API。使用帶有值交換的 font-display告訴瀏覽器應該立即使用系統(tǒng)字體顯示使用此字體的文本。。
使用可變字體以減少文件大小。
可變字體使字體的許多不同變化能夠被整合到一個文件中，而不是為每一種寬度、重量或樣式都有一個單獨的字體文件。它們讓您可以通過CSS和一個@font-face引用來訪問一個給定字體文件中的所有變化。
當你需要多個字體時，可變字體可以顯著減少文件大小。與其加載常規(guī)和粗體風格加上它們的斜體版本，你可以加載一個包含所有信息的單一文件。
Monotype做了一個實驗，將12種輸入字體組合起來，生成8種權重，橫跨3種寬度，橫跨斜體和羅馬風格。將48種單獨的字體存儲在一個可變字體文件中，意味著文件大小減少了88%。
不用擔心CSS選擇器的速度問題。
CSS選擇符的結構方式會影響瀏覽器匹配它們的速度。瀏覽器從右到左讀取選擇符，所以當你使用后代選擇器時。例如，nav a {}，它會首先匹配頁面上的每一個 <a>元素，然后再將nav里面的元素歸零。如果你使用一個更具體的選擇器，例如，在nav元素內(nèi)的每個 <a>上使用.nav-link，它就不會花時間去匹配頁面上的每個 <a>。
如果你考慮瀏覽器是如何從右到左匹配選擇符的，再舉個例子，比如.container ul li a { }，你就會明白為什么后代選擇器經(jīng)常被貼上 "昂貴 "的標簽。
看起來，這樣的選擇器會是一個速度問題。然而，選擇器匹配性能是很快的。CSS聲明對壓縮算法非常友好，因此優(yōu)化CSS選擇器所需的努力通常會更好地用在應用程序的其他部分，投資回報率更高。
CSS對于加載頁面和愉快的用戶體驗至關重要。雖然我們通常可能會優(yōu)先考慮其他資源（如腳本或圖像），因為它們更具影響力，但我們不應該忘記CSS。通過上述策略，您將能夠確保快速交付和執(zhí)行。
