瀏覽器載入時間線

建立document物件，新增節點物件(也就是開始搭建dom結構樹)，此時document.readystate="loading"

遇到link外部css檔案，建立新的執行緒載入，繼續解析文件

遇到script引入外部js，並且如果沒有設定async、defer，瀏覽器載入該js檔案時會阻塞html的解析過程，一直等待js載入並執行完成

遇到script外部js，並且設定有async、defer，瀏覽器建立新執行緒載入，並且繼續解析文件，對於async屬性的指令碼，指令碼載入完成以後立即執行，defer則在dom結構搭建完成以後執行(對於非同步指令碼，禁止使用document.write())

遇到img標籤，正常搭建dom結構，並且建立新執行緒載入src

文件解析完成，狀態位改變，document.readystate="interactive"

資源都載入完成，domtree搭建完成，執行defer指令碼

之後document物件觸發domcontentloaded事件，標誌著該頁面載入渲染完成，並且該事件只能夠通過addeventlistener繫結

當頁面全部載入執行完成以後。更準確的說應該是domcontentloaded事件觸發以後，狀態位改變document.readystate="complete"

此後，瀏覽器以非同步響應方式處理使用者輸入、網路事件等

posted @

2019-01-09 17:00

秦曉 閱讀(

...)

編輯收藏

瀏覽器載入時間線

建立document物件，新增節點物件 也就是開始搭建dom結構樹 此時document.readystate loading 遇到link外部css檔案，建立新的執行緒載入，繼續解析文件 遇到script引入外部js，並且如果沒有設定async defer，瀏覽器載入該js檔案時會阻塞html的解...

瀏覽器的時間線流程定義

阻擋 blocking 每個瀏覽器有併發連線數量的上限 例如firefox對每個host限制6個連線 如果當前建立的連線數已經超過上限，那麼其餘該請求會被阻塞，等待新的可以用的連線。網域名稱解析 dns lookup 這個不用解釋了吧，就是從dns請求發出去到收到回覆的時間。即上圖中dns的那一段。...

js載入時間線

建立document物件，開始解析web頁面。解析html元素和他們的文字內容後新增element物件和text節點到文件中。這個階段 document.readystate loading 遇到link外部css，建立執行緒載入，並繼續解析文件。遇到script外部js，並且沒有設定async d...