js加載時間線是一個理論依據,爲以後優化一些東西做一些基本的理論支持;
時間線:通俗來說就是當瀏覽器出生的那一刻開始所記錄的一系列瀏覽器按順序所做的事兒;瀏覽器在運行一個頁面時,首先會初始化js的功能,當初始化初試完js這一個功能後,也就是js開始發揮作用那一刻,開始記載着這一系列瀏覽器要發生的過程;
那麼這一系列順序分爲十步,如下:
1、創建Document對象,開始解析Web頁面;此階段document.readyState = 'loading';
2、遇到link外部css,創建創建線程加載,並繼續解析文檔;
3、遇到script外部js,並且沒有設置async、defer,瀏覽器加載並阻塞,等待js加載完成並執行該腳本,繼續解析文檔;
4、遇到script外部js,並且設置有async、defer,瀏覽器創建線程,並繼續解析文檔;
5、遇到img等,先正常解析dom結構,然後瀏覽器異步加載src,並繼續解析文檔;
6、當文檔解析完成,document.readyState = 'interactive';
7、文檔解析完成後,所有設置有defer的腳本會按照順序執行。(注意defer與async的區別,可見另一篇博客);
8、document對象觸發DOMContentLoaded事件,這也標誌着程序執行從同步腳本執行階段,轉化爲事件驅動階段;
9、當所有async的腳本加載完成並執行後,img等加載完成後,document.readyStste = 'complete',window對象觸發load事件;
10、從此,以異步響應方式處理用戶輸入,網絡事件等;