CSS阻塞渲染 怎麼防止css阻塞

2022-01-20 10:50:19 字數 1720 閱讀 4933

瀏覽器渲染流程:

1、瀏覽器開始解析目標html檔案,執行流的順序為自上而下。

2、html解析器將html結構轉換為基礎的dom(文件物件模型),構建dom樹完成後,觸發domcontendloaded事件。

3、css解析器將css解析為cssom(層疊樣式表物件模型),一棵僅含有樣式資訊的樹。

4、cssom和dom開始合併構成渲染樹,每個節點開始包含具體的樣式資訊。

5、計算渲染樹中個各個節點的位置資訊,即布局階段。

6、將布局後的渲染樹顯示到介面上。

預設情況下,css 被視為阻塞渲染的資源,這意味著瀏覽器將不會渲染任何已處理的內容,直至 cssom 構建完畢。請務必精簡您的 css,盡快提供它,並利用**型別和查詢來解除對渲染的阻塞。

在渲染樹構建中,我們看到關鍵渲染路徑要求我們同時具有 dom 和 cssom 才能構建渲染樹。這會給效能造成嚴重影響:html 和 css 都是阻塞渲染的資源。

html 顯然是必需的,因為如果沒有 dom,我們就沒有可渲染的內容,但 css 的必要性可能就不太明顯。

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

我們可以通過 css「**型別」和「**查詢」來解決這類用例:

"

style.css

" rel="

stylesheet

">

"print.css

" rel="

stylesheet

" media="

print

">

"other.css

" rel="

stylesheet

" media="

(min-width: 40em)

">

**查詢由**型別以及零個或多個檢查特定**特徵狀況的表示式組成。

通過使用**查詢,我們可以根據特定用例(比如顯示或列印),也可以根據動態情況(比如螢幕方向變化、尺寸調整事件等)定製外觀。宣告您的樣式表資產時,請密切注意**型別和查詢,因為它們將嚴重影響關鍵渲染路徑的效能。

讓我們考慮下面這些例項:

"

style.css

" rel="

stylesheet

">

"style.css

" rel="

stylesheet

" media="

all">

"portrait.css

" rel="

stylesheet

" media="

orientation:portrait

">

"print.css

" rel="

stylesheet

" media="

print

">

第乙個宣告阻塞渲染,適用於所有情況。

第二個宣告同樣阻塞渲染:「all」是預設型別,如果您不指定任何型別,則隱式設定為「all」。因此,第乙個宣告和第二個宣告實際上是等效的。

第三個宣告具有動態**查詢,將在網頁載入時計算。根據網頁載入時裝置的方向,portrait.css 可能阻塞渲染,也可能不阻塞渲染。

最後乙個宣告只在列印網頁時應用,因此網頁眉次在瀏覽器中載入時,它不會阻塞渲染。

CSS阻塞渲染 怎麼防止css阻塞

瀏覽器渲染流程 1 瀏覽器開始解析目標html檔案,執行流的順序為自上而下。2 html解析器將html結構轉換為基礎的dom 文件物件模型 構建dom樹完成後,觸發domcontendloaded事件。3 css解析器將css解析為cssom 層疊樣式表物件模型 一棵僅含有樣式資訊的樹。4 css...

前端優化 阻塞渲染的CSS

這裡主要簡述,構建 cssom 相關!預設情況下,css 被視為阻塞渲染的資源,這意味著瀏覽器將不會渲染任何已處理的內容,直至 cssom 構建完畢。請務必精簡您的 css,盡快提供它,並利用 型別和查詢來解除對渲染的阻塞。在渲染樹構建 可檢視上篇文章 中,我們看到關鍵渲染路徑要求我們同時具有 do...

前端效能優化之 css阻塞渲染

瀏覽器渲染流程 1瀏覽器開始解析目標html檔案,執行流的順序為自上而下。2html解析器將html結構轉換為基礎的dom 文件物件模型 構建dom樹完成後,觸發domcontendloaded事件。3css解析器將css解析為cssom 層疊樣式表物件模型 一棵僅含有樣式資訊的樹。4cssom和d...