發布日期：2014 年 3 月 31 日
根據預設，CSS 會視為阻礙算繪的資源，也就是說，瀏覽器要等到 CSSOM 建構完成，才會算繪任何已處理的內容。請務必精簡 CSS、盡快提供 CSS，並使用媒體類型和查詢來解除封鎖算繪作業。
在算繪樹狀結構建構中，我們看到重要算繪路徑需要 DOM 和 CSSOM 才能建構算繪樹狀結構。這會造成重要的效能影響：HTML 和 CSS 都是會阻斷轉譯的資源。HTML 很明顯，因為沒有 DOM 就無法轉譯任何內容，但 CSS 需求可能較不明顯。如果我們嘗試顯示一般網頁，但未封鎖 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)" />
媒體查詢包含媒體類型，以及零或多個運算式，用於檢查特定媒體功能的條件。舉例來說，我們的第一個 CSS 樣式表宣告未提供媒體類型或查詢，因此適用於所有情況，也就是一律會阻礙算繪。另一方面，第二個 CSS 樣式表聲明只會在列印內容時套用，您可能想重新排列版面配置、變更字型，以及考量其他重要的列印設計。因此，這個 CSS 樣式表宣告不需要在網頁首次載入時封鎖網頁的顯示作業。最後，最後一個 CSS 樣式表宣告會提供「媒體查詢」，由瀏覽器執行：如果條件相符，瀏覽器會封鎖算繪作業，直到 CSS 樣式表下載並處理完畢為止。
使用媒體查詢時，我們可以根據特定用途 (例如顯示與列印) 和動態條件 (例如螢幕方向變更、大小調整事件等)，調整呈現方式。宣告 CSS 樣式表資產時，請特別注意媒體類型和查詢，因為這些項目會大幅影響重要算繪路徑的效能。
請思考以下情況：
<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可能會或不會造成算繪遭到封鎖。 - 最後一個宣告只會在列印網頁時套用 (
"print")，因此網頁首次載入瀏覽器時不會遭到封鎖。
最後請注意，「阻礙轉譯」只表示瀏覽器是否必須保留該資源的網頁初始轉譯。無論是哪種情況，瀏覽器仍會下載 CSS 資產，但非封鎖資源的優先順序較低。