瀏覽器時間線

TimeLine

什麼是瀏覽器時間線？

時間線也能夠理解爲記錄瀏覽器加載頁面一系列發生的過程。

時間線分爲哪幾個過程？

通常分爲十個步驟：

1. 建立 Document 對象，開始解析 web 頁面。解析 HTML 元素和他們的文本內容，後添加 Element 對象和 Text 節點到文檔中。這個階段 document.readyState ='loading'。

2. 遇到 link 外部 css，建立線程，進行異步加載，並繼續解析文檔。

3. 遇到 script 外部 js，而且沒有設置 async、defer，瀏覽器同步加載，並阻塞，等待 js 加載完成並執行該腳本，而後繼續解析文檔。

4. 遇到 script 外部 js，若是是設置有 async、defer，瀏覽器建立線程異步加載，並繼續解析文檔。對於 async屬性的腳本，腳本加載完成後當即執行。 （異步禁止使用document.write()，由於當你整個文檔解析到差很少，再調用 document.write()，會把以前全部的文檔流都清空，用它裏面的文檔代替）

5. 遇到 img 等（帶有 src），先正常解析 dom 結構，而後瀏覽器異步加載 src，並繼續解析文檔。

6. 當文檔解析完成（DomTree 創建完畢，不是加載完畢），此時document.readyState ='interactive'。

7. 文檔解析完成後，全部設置有 defer 的腳本會按照順序執行。（注意與 async 的不一樣,但一樣禁止使用 document.write()）

8. document 對象觸發 DOMContentLoaded 事件，這也標誌着程序執行從同步腳本執行階段，轉化爲事件驅動階段。

9. 當全部 async 的腳本加載完成並執行後、img 等加載完成後（頁面全部的都執行加載完以後），document.readyState = 'complete'，window 對象觸發 load 事件。

10. 今後，以異步響應方式處理用戶輸入、網絡事件等。

如何使用Chrome開發者工具中的timeline？

timeline的使用

更多文章請轉移：github.com/wangyicong