為什麼css還沒下載完,domcontentloaded(藍色線) 就完成了?
认证0级讲师
1.瀏覽器開始解析目標HTML檔,執行流的順序為自上而下。 2.HTML解析器將HTML結構轉換為基礎的DOM(文檔物件模型),建構DOM樹完成後,觸發DomContendLoaded事件。 3.CSS解析器將CSS解析為CSSOM(層疊樣式表物件模型),一棵僅含有樣式資訊的樹。 4.CSSOM和DOM開始合併構成渲染樹,每個節點開始包含特定的樣式資訊。 5.計算渲染樹中各節點的位置資訊,即佈局階段。 6.將佈局後的渲染樹顯示到介面上。
domcontentloaded本身就是當HTML標籤已經完成載入和解析時,無需等待樣式表。
domcontentloaded
link方式來載入css是和網頁載入同時進行的
DOMContentLoaded 事件將被觸發,當初始HTML文件已經完成載入和解析時,而無需等待樣式表,圖像和子訊框的完全載入。 參考:https://developer.mozilla.org...
首先css下载不会阻塞网页渲染,一个网页由html和资源资源组成,其他资源的下载不会影响到html檔案本身的下載,他們之間是並發的。
css
html
DOM 和 CSSOM 是獨立的資料結構參考:https://developers.google.com...
1.瀏覽器開始解析目標HTML檔,執行流的順序為自上而下。
2.HTML解析器將HTML結構轉換為基礎的DOM(文檔物件模型),建構DOM樹完成後,觸發DomContendLoaded事件。
3.CSS解析器將CSS解析為CSSOM(層疊樣式表物件模型),一棵僅含有樣式資訊的樹。
4.CSSOM和DOM開始合併構成渲染樹,每個節點開始包含特定的樣式資訊。
5.計算渲染樹中各節點的位置資訊,即佈局階段。
6.將佈局後的渲染樹顯示到介面上。
domcontentloaded
本身就是當HTML標籤已經完成載入和解析時,無需等待樣式表。link方式來載入css是和網頁載入同時進行的
DOMContentLoaded 事件將被觸發,當初始HTML文件已經完成載入和解析時,而無需等待樣式表,圖像和子訊框的完全載入。
參考:https://developer.mozilla.org...
首先
css
下载不会阻塞网页渲染,一个网页由html
和资源资源组成,其他资源的下载不会影响到html
檔案本身的下載,他們之間是並發的。DOM 和 CSSOM 是獨立的資料結構
參考:https://developers.google.com...