前端優化--阻塞渲染的CSS

接上一篇「關鍵渲染路徑」，瀏覽器大致經過了：構建 DOM 樹、構建 CSSOM 樹、構建渲染樹、佈局、繪製五個步驟。

這裏主要簡述，構建 CSSOM 相關！

默認情況下，CSS 被視爲阻塞渲染的資源，這意味着瀏覽器將不會渲染任何已處理的內容，直至 CSSOM 構建完畢。請務必精簡您的 CSS，儘快提供它，並利用媒體類型和查詢來解除對渲染的阻塞。

在 渲染樹構建（可查看上篇文章） 中，我們看到關鍵渲染路徑要求我們同時具有 DOM 和 CSSOM 才能構建渲染樹。這會給性能造成嚴重影響：HTML 和 CSS 都是阻塞渲染的資源。 HTML 顯然是必需的，因爲如果沒有 DOM，我們就沒有可渲染的內容，但 CSS 的必要性可能就不太明顯。如果我們在 CSS 不阻塞渲染的情況下嘗試渲染一個普通網頁會怎樣？

• 默認情況下，CSS 被視爲阻塞渲染的資源。
• 我們可以通過媒體類型和媒體查詢將一些 CSS 資源標記爲不阻塞渲染。
• 瀏覽器會下載所有 CSS 資源，無論阻塞還是不阻塞。
  
  上例展示了紐約時報網站使用和不使用 CSS 的顯示效果，它證明了爲何要在 CSS 準備就緒之前阻塞渲染，— 沒有 CSS 的網頁實際上無法使用。右側的情況通常稱爲“內容樣式短暫失效”(FOUC)。瀏覽器將阻塞渲染，直至 DOM 和 CSSOM 全都準備就緒。

CSS 是阻塞渲染的資源。需要將它儘早、儘快地下載到客戶端，以便縮短首次渲染的時間。

不過，如果我們有一些 CSS 樣式只在特定條件下（例如顯示網頁或將網頁投影到大型顯示器上時）使用，又該如何？如果這些資源不阻塞渲染，該有多好。

我們可以通過 CSS“媒體類型”和“媒體查詢”來解決這類用例：

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

媒體查詢由媒體類型以及零個或多個檢查特定媒體特徵狀況的表達式組成。例如：

第一個樣式表聲明未提供任何媒體類型或查詢，因此它適用於所有情況，也就是說，它始終會阻塞渲染。
第二個樣式表則不然，它只在打印內容時適用 — 或許您想重新安排佈局、更改字體等等，因此在網頁首次加載時，該樣式表不需要阻塞渲染。
最後一個樣式表聲明提供由瀏覽器執行的“媒體查詢”：符合條件時，瀏覽器將阻塞渲染，直至樣式表下載並處理完畢。

通過使用媒體查詢，我們可以根據特定用例（比如顯示或打印），也可以根據動態情況（比如屏幕方向變化、尺寸調整事件等）定製外觀。聲明樣式表時，請密切注意媒體類型和查詢，因爲它們將嚴重影響關鍵渲染路徑的性能。

讓我們考慮下面這些實例：

<link href="style.css"    rel="stylesheet">
<link href="style.css"    rel="stylesheet" media="all"> 
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css"    rel="stylesheet" media="print">

• 第一個聲明阻塞渲染，適用於所有情況。
• 第二個聲明同樣阻塞渲染：“all”是默認類型，如果您不指定任何類型，則隱式設置爲“all”。因此，第一個聲明和第二個聲明實際上是等效的。
• 第三個聲明具有動態媒體查詢，將在網頁加載時計算。根據網頁加載時設備的方向，portrait.css 可能阻塞渲染，也可能不阻塞渲染。
• 最後一個聲明只在打印網頁時應用，因此網頁首次在瀏覽器中加載時，它不會阻塞渲染。

最後，請注意“阻塞渲染”僅是指瀏覽器是否需要暫停網頁的首次渲染，直至該資源準備就緒。無論哪一種情況，瀏覽器仍會下載 CSS 內容，只不過不阻塞渲染的資源優先級較低罷了。