頁面載入時觸發的事件及順序

前言

　　頁面載入時，大致可以分為以下幾個步驟：

1. 　　開始解析HTML文檔結構
2. 　　載入外部樣式表及JavaScript腳本
3. 　　解析執行JavaScript腳本
4. 　　DOM樹渲染完成
5. 　　載入未完成的外部資源（如 圖片）
6.        頁面載入成功

　　那麼在這整個過程中觸發了哪些常用的事件呢？

document readystatechange事件

　　readyState 屬性描述了文檔的載入狀態，在整個載入過程中 document.readyState會不斷變化，每次變化都會觸發readystatechange事件。

　　readyState 有以下狀態：

　　　　loading / 載入document 仍在載入。

　　　　interactive / 互動文檔已經完成載入，文檔已被解析，但是諸如圖像，樣式表和框架之類的子資源仍在載入。

　　　　complete / 完成T文檔和所有子資源已完成載入。狀態表示 load 事件即將被觸發。

　　比如說在步驟2的時候對應 interactive   步驟5之後對應complete ，都會觸發readystatechange事件。

　　PS:文檔，圖片等載入時的readyState 和 XMLHttpRequest.readyState 是不一樣的。要註意區分

document DOMContentLoaded事件

　　DOM樹渲染完成時觸發DOMContentLoaded事件，此時可能外部資源還在載入。 jquery中的ready事件就是同樣的效果

window load事件

　　所有的資源全部載入完成會觸發window 的 load事件。

　　doucment 的load事件無法觸發，但是MDN上卻有這個事件？求大神指導！！！

實例

  <h1>測試頁面載入時，事件觸發次序</h1>
  <img src="http://c.hiphotos.baidu.com/image/pic/item/09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt="">
  <h1>測試頁面載入時，事件觸發次序</h1>
  <img src="http://h.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fb75ed26e764224f4a21a4ddcc.jpg" alt="">
  <h1>測試頁面載入時，事件觸發次序</h1>
  <script type="text/javascript">
    console.log('resolve body JavaScript');
   
    window.addEventListener('load',function(){
      console.log('window load');
    })

    document.addEventListener('readystatechange',function(){
      console.log('document ' + document.readyState);
    })

    document.addEventListener('DOMContentLoaded',function(){
      console.log('document DOMContentLoaded');
    })
    //document 沒有load事件??
    document.addEventListener('load',function(){
      console.log('document load');
    })
  </script>

　　在chrome中的日誌輸出如下：

　　resolve body JavaScript --> document interactive -->  document DOMContentLoaded --> document complete -->  window load 

　　完全符合預期有木有。所以在只需要文檔結構載入完成就可以執行的腳本，可以監聽DOMContentLoaded ；需要所有內容都載入完成才能執行的腳本，要監聽window.onload  或者 document.readyState === 'complete'。