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

前言

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

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'。