javascript - css會阻塞網頁渲染嗎

Question

為什麼css還沒下載完，domcontentloaded（藍色線） 就完成了？

#

Answer 1

1.瀏覽器開始解析目標HTML檔,執行流的順序為自上而下。
2.HTML解析器將HTML結構轉換為基礎的DOM(文檔物件模型),建構DOM樹完成後,觸發DomContendLoaded事件。
3.CSS解析器將CSS解析為CSSOM(層疊樣式表物件模型),一棵僅含有樣式資訊的樹。
4.CSSOM和DOM開始合併構成渲染樹,每個節點開始包含特定的樣式資訊。
5.計算渲染樹中各節點的位置資訊,即佈局階段。
6.將佈局後的渲染樹顯示到介面上。

Answer 2

domcontentloaded本身就是當HTML標籤已經完成載入和解析時，無需等待樣式表。

Answer 3

link方式來載入css是和網頁載入同時進行的

Answer 4

DOMContentLoaded 事件將被觸發，當初始HTML文件已經完成載入和解析時，而無需等待樣式表，圖像和子訊框的完全載入。
參考：https://developer.mozilla.org...

Answer 5

首先css下载不会阻塞网页渲染，一个网页由html和资源资源组成，其他资源的下载不会影响到html檔案本身的下載，他們之間是並發的。

Answer 6

DOM 和 CSSOM 是獨立的資料結構
參考：https://developers.google.com...