關於瀏覽器解析html全過程詳解

標籤：dom   base   word   如何   地方   div   知識庫   結構   javascrip   

本人web前端菜鳥一枚，第一次在這裡發部落格梳理知識，知識都是從各地方查閱引用以及自己的理解得來，有什麼錯誤的地方歡迎指正。

 

DOM文檔通常載入的步驟：

1.解析HTML結構。

2.載入外部指令碼和樣式表檔案

3.解析並執行指令碼代碼。

4.DOM樹構建完成。//DOMContentLoaded

5.載入圖片等外部資源。

6.頁面載入完畢。//load

順序是這樣，但很多時候幾個步驟是同時發生的。

  在這裡梳理一下完整流程下的各種細節：

  由於瀏覽器採用至上而下的方式解析，所以會先解析html，直到遇到外部樣式和外部指令碼。這時會阻塞瀏覽器的

解析，外部樣式和外部指令碼（在沒有async、defer屬性下）會並行載入，但是外部樣式會阻塞外部指令碼的執行。

  即：html解析->外部樣式、指令碼載入->外部樣式執行->外部指令碼執行->html繼續解析

  情況一：如果是動態指令碼（即內聯指令碼）則不受樣式影響，在解析到它時會執行。

  情況二：外部樣式後續外部指令碼含有async屬性（IE下為defer），外部樣式不會阻塞該指令碼的載入與執行

  在外部樣式執行完畢後，css附著於DOM，建立了一個渲染樹（渲染樹是一些被渲染對象的集）。每個渲染對象都

包含了與之對應的計算過樣式的DOM對象，對於每個渲染元素來說，位置都經過計算，所以這裡被叫做“布局”。然

後將“布局”顯示在瀏覽器視窗，稱之為“繪製”。

  接著指令碼的執行完畢後，DOM樹構建完成。這時，可以觸發DOMContentLoaded事件。

  DOMContentLoaded事件的觸發條件是：在所有的DOM全部載入完畢並且js載入執行後觸發。

  情況一：如果指令碼是動態載入，則不會影響DOMContentLoaded時間的觸發

  瀏覽器會等css載入完成後再載入圖片，因為不確定圖片的樣式會如何。  

  要點一：CSS樣式表會阻塞圖片的載入，如果想讓圖片儘快載入，就不要給圖片使用樣式，比如寬高採用標籤屬性即可。

  要點二：指令碼不會阻塞圖片的載入

  最後頁面載入完成，頁面load

 

關於瀏覽器解析html全過程詳解