瀏覽器渲染流程：
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="
">
"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="
">
第乙個宣告阻塞渲染，適用於所有情況。
第二個宣告同樣阻塞渲染：「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...