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