發布日期：2014 年 3 月 31 日
根據預設，CSS 會視為封鎖轉譯資源，也就是說 在 CSSOM 載入前，瀏覽器不會轉譯任何處理的內容 訓練方式數量請務必精簡 CSS，盡可能快速地提供 CSS，並使用媒體類型和查詢來解除算繪封鎖。
在算繪樹狀結構建構中，我們發現重要的轉譯路徑同時需要 DOM 和 CSSOM 來建構算繪樹狀結構。這項做法會對效能產生重大影響：HTML 和 CSS 都會造成阻塞資源。HTML 很明顯，因為如果沒有 DOM，我們就無法顯示任何資訊，但 CSS 規定可能較不明顯。如果我們嘗試在未阻斷 CSS 算繪的情況下算繪一般頁面，會發生什麼情況？
摘要
- 根據預設，CSS 會視為轉譯阻斷資源。
- 媒體類型和媒體查詢能將部分 CSS 資源標示為非算繪封鎖。
- 無論封鎖或非封鎖行為，瀏覽器都會下載所有 CSS 資源。
前述範例為包含及沒有 CSS 的紐約時報網站，說明在 CSS 可用前，為什麼轉譯功能會遭到封鎖 (因為 CSS 網頁相對無法使用)。右側的體驗通常稱為「Flash of Unstyled Content (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不一定會遭到封鎖。 - 最後一個宣告只會在網頁列印時套用 (
"print")，因此在瀏覽器中首次載入網頁時不會造成轉譯阻斷。
最後，請注意，「轉譯阻斷」一詞僅是指瀏覽器是否必須保留該資源的網頁初始轉譯作業。無論是哪一種情況，瀏覽器都會下載 CSS 資產，但是對於非封鎖資源的優先順序較低。