技術標籤：javascript

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()

原因是： 相當於html文件輸出到頁面，當整個文件解析差不多的時候，再呼叫document.write()方法的時候，它將之前的所有文件流清空，將當前的文件流輸出

例如：window.οnlοad=function(){} 該方法是頁面所有載入並且所有文件解析完畢後，然後載入呼叫該方法，就會將之前的文件流全部清空）

5.遇到img等，先正常解析dom結構，然後瀏覽器非同步載入src，並繼續解析文件。

6.當文件解析完成（domtree剛建立完），document.readyState=“interactive”;

7.文件解析完成後，所有設定defer的指令碼會按照順序執行。（注意與ansyc的不同，但同樣機制使用document.write()）

8.document物件觸發DOMContentLoaded事件，這也標誌著程式執行從同步指令碼執行階段，轉化為事件驅動階段。

9.當所有的async的指令碼載入完成並執行後，img等載入完成後，document.readyState=“complete”,window物件觸發load事件。

10.從此，以非同步響應方式處理使用者輸入，網路事件等。

總結三句話：

1. 建立document文件物件
2. 文件解析完
3. 載入完，再執行完

 console.log(document.readyState);  // loading

document.onreadystatechange = function(){
	console.
 
log(document.readyState); // interactive,complete
}

document.addEventListener('DOMContentLoaded',function(){ // DOMContentLoaded事件只能繫結在addEvenListener上，模擬jquery方法，等DOM解析完之後再執行
	console.log("a");
},false);

==>

loading

interactive

a

complete

html程式碼中，為了將DOM文件解析完之後執行js程式碼，便將js寫在DOM文件結構之後，但是這樣寫不夠美觀，所以為了解決這個問題，可以用下面兩種方法解決。

1.window.onload(); // 執行效率慢，土鱉式寫法，就是頁面所有的東西載入並且執行完之後才執行的方法，假如頁面其中任何一個src的資源沒被載入，該onload事件便無法執行

2.document.addEventListener(‘DOMContentLoaded’,function(){…},false); //解析完之後，執行該方法， 效率較高