瀏覽器載入時間線

2022-01-19 21:30:11 字數 1032 閱讀 7486

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

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

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

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

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

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

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

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

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

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

瀏覽器載入時間線

建立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...