js---js時間線(瀏覽器解析過程)
阿新 • • 發佈:2018-11-12
1、建立Document物件,開始解析web介面。document.readyState='loading'。
2、遇到link外部css,建立執行緒載入,並繼續原執行緒的解析。
3、遇到外部js檔案,並沒設有async/defer的屬性,瀏覽器正常載入js(阻塞),等js載入完成再執行下面的內容。
4、遇到外部js檔案,但是設有async/defer的屬性,瀏覽器建立新的執行緒進行載入,原執行緒繼續自己的行為。(async是當載入js完畢直接就執行,defer是頁面解析完畢後再執行,非同步載入不允許用document.write());
5、遇到Img,先正常解析出dom結構,非同步載入src,並繼續進行解析。
6、當文件解析完畢(document.readyState="interative")。
7、解析完畢之後,所有設定defer的指令碼會按照順序執行。
8、document物件觸發DOMContentLoaded事件,標誌程式執行從同步指令碼執行階段轉換為事件驅動。
9、當async的指令碼載入並執行後,Img載入完成後,document.readyState="compete"。
10、以非同步響應處理網路,使用者操作實行互動。
window.onload是在頁面解析載入完畢再執行---沒意義,使用者體驗極差(等待時間長)
document.addEventListener('DOMContentLoaded',function(){},false)---DOM解析(document.readyState='interactive')完,就執行。