根據預設,系統會將 CSS 視為轉譯封鎖資源,這表示瀏覽器在建構 CSSOM 之前,瀏覽器不會轉譯任何處理的內容。請務必讓 CSS 易於精簡並盡快放送,並使用媒體類型和查詢來解除封鎖算繪作業。
在轉譯樹狀結構中,我們發現關鍵轉譯路徑需要 DOM 和 CSSOM 來建構轉譯樹狀結構。這可能會對效能產生重大影響:HTML 和 CSS 都屬於造成阻斷資源的情形。HTML 很顯而易見,如果沒有 DOM 可以顯示任何內容,但 CSS 要求可能較不明顯。如果我們嘗試顯示一般網頁,而不禁止在 CSS 上顯示,會發生什麼事?
摘要
- 根據預設,系統會將 CSS 視為禁止轉譯資源。
- 我們可以透過媒體類型和媒體查詢,將部分 CSS 資源標示為無法轉譯。
- 瀏覽器會下載所有 CSS 資源,不論封鎖或非封鎖行為為何。
![《NYTimes with CSS》](https://web.developers.google.cn/static/articles/critical-rendering-path/render-blocking-css/image/nytimes-css-de9a8a85f18fa.png?authuser=3&hl=zh-tw)
![沒有 CSS 的 NYTime](https://web.developers.google.cn/static/articles/critical-rendering-path/render-blocking-css/image/nytimes-without-css-6d823cc9c8ea4.png?authuser=3&hl=zh-tw)
上例顯示無論是否有 CSS 資訊的 NYTimes 網站,可說明為什麼在 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」。因此,第一和第二項宣告實際上是相等的。
- 第三個宣告包含動態媒體查詢,系統會在網頁載入時進行評估。視網頁載入時的裝置方向而定,portrait.css 可能會禁止轉譯。
- 最後一個宣告只會在網頁列印時套用,因此瀏覽器首次載入網頁時,不會造成妨礙。
最後請注意,「轉譯封鎖程式」只表示瀏覽器是否需要保留該資源網頁的初始轉譯作業。無論是哪一種情況,瀏覽器仍會下載 CSS 素材資源,但非封鎖資源的優先順序較低。