在頁面載入過程中，當客戶端請求服務端獲取頁面**後是如何解析的呢？
分為以下五個步驟：
第一步 ：構建dom樹，其中包括語法解析、詞法解析，最後構成節點相連的樹
第二步：構建cssom樹，對每個節點新增樣式
第三步：合併dom樹和cssom樹形成渲染樹
其中需要過濾不可見的節點、樣式隱藏的節點
第四步：根據渲染樹來計算節點的幾何資訊
第五步：將節點在頁面正確的位置渲染
從以上步驟可以看出，dom和css是阻塞頁面渲染的主要部分，而dom是必須的，沒有dom也就沒有內容可渲染，而css並不是完全必須的。
1.對css進行**查詢載入，如
<link
href
="style.css"
rel="stylesheet"
media
='print'
>
就表示在列印時才載入此處的css
2.對必要的css進行提前載入（檔案靠前、減小檔案體積），減少對頁面首次渲染的阻塞
然而我們必須知道的是：
js檔案載入也會阻塞頁面渲染，會延遲domcontentloaded事件的觸發，解決方法主要有
1.將js檔案的匯入置於html底部
2.使用defer或async非同步載入
而js檔案的載入也會被css檔案的載入而阻塞
只有頁面中不含有js檔案或只有非同步載入的js檔案時，css載入與js載入才互不影響
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...
前端優化 阻塞渲染的CSS
這裡主要簡述，構建 cssom 相關！預設情況下，css 被視為阻塞渲染的資源，這意味著瀏覽器將不會渲染任何已處理的內容，直至 cssom 構建完畢。請務必精簡您的 css，盡快提供它，並利用 型別和查詢來解除對渲染的阻塞。在渲染樹構建 可檢視上篇文章 中，我們看到關鍵渲染路徑要求我們同時具有 do...