這裡主要簡述，構建 cssom 相關！預設情況下，css 被視為阻塞渲染的資源，這意味著瀏覽器將不會渲染任何已處理的內容，直至 cssom 構建完畢。請務必精簡您的 css，盡快提供它，並利用**型別和查詢來解除對渲染的阻塞。
在渲染樹構建（可檢視上篇文章） 中，我們看到關鍵渲染路徑要求我們同時具有 dom 和 cssom 才能構建渲染樹。這會給效能造成嚴重影響：html 和 css 都是阻塞渲染的資源。html 顯然是必需的，因為如果沒有 dom，我們就沒有可渲染的內容，但 css 的必要性可能就不太明顯。如果我們在 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">
前端效能優化之 css阻塞渲染
瀏覽器渲染流程 1瀏覽器開始解析目標html檔案,執行流的順序為自上而下。2html解析器將html結構轉換為基礎的dom 文件物件模型 構建dom樹完成後,觸發domcontendloaded事件。3css解析器將css解析為cssom 層疊樣式表物件模型 一棵僅含有樣式資訊的樹。4cssom和d...
CSS阻塞渲染 怎麼防止css阻塞
瀏覽器渲染流程 1 瀏覽器開始解析目標html檔案，執行流的順序為自上而下。2 html解析器將html結構轉換為基礎的dom 文件物件模型 構建dom樹完成後，觸發domcontendloaded事件。3 css解析器將css解析為cssom 層疊樣式表物件模型 一棵僅含有樣式資訊的樹。4 css...
CSS阻塞渲染 怎麼防止css阻塞
瀏覽器渲染流程 1 瀏覽器開始解析目標html檔案，執行流的順序為自上而下。2 html解析器將html結構轉換為基礎的dom 文件物件模型 構建dom樹完成後，觸發domcontendloaded事件。3 css解析器將css解析為cssom 層疊樣式表物件模型 一棵僅含有樣式資訊的樹。4 css...