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

DOM文檔通常加載的步驟：

1.解析HTML結構。

2.加載外部腳本和樣式表文件

3.解析並執行腳本代碼。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

情況一：如果腳本是動態加載，則不會影響DOMContentLoaded時間的觸發

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

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

要點二：腳本不會阻塞圖片的加載

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

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