在瀏覽器地址欄輸入URL地址，瀏覽器開始加載頁面時，有以下幾個過程
1、瀏覽器開始解析HTML文檔
2、 瀏覽器遇到HTML文檔中的<script>元素以及CSS樣式文件，並且沒有async或defer屬性，就暫停解析，開始執行腳本和CSS樣式
3、 HTML文檔解析完成
4、 瀏覽器等待圖片、樣式表、字體文件等外部資源加載完成
在這其中，有兩個階段：
ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）；
load，表示頁面包含圖片等外部文件在內的所有元素都加載完成。
DOM Ready
嚴格來說，ready並不是DOM中的事件，只是因為在jQuery中，有ready()方法，它在頁面HTML文檔解析完成但圖片等媒體文件加載完成之前執行。
使用jQuery插件一般都這么寫
$(function(){ //do something alert('something finished！') });
其實這個就是jQuery ready()的簡寫，他等價於
$(document).ready(function(){ //do something alert('something finished！') })
這個jQuery ready()的方法就是DOM Ready ，他的作用就是，在DOM加載完成后，圖片等外部文件加載之前，就可以對DOM進行操作。
在不使用jQuery的情況下，可以使用DOMContentLoaded事件可以判斷DOM的ready狀態。
document.addEventListener('DOMContentLoaded', function () {
//do something
alert('something finished！')
});
它表示在document節點上監聽DOMContentLoaded事件，一旦document中的DOM完成加載就觸發此事件。
IE8不支持DOMContentLoaded事件，因此在較低版本的瀏覽器中，可以使用 readystatechange事件，效果是一樣的。
document.onreadystatechange = function () { if (document.readyState == "interactive") { //do something alert('something finished！') }}
其中，document.readyState屬性返回當前文檔的狀態，共有三種可能的值。
- loading：加載HTML代碼階段（尚未完成解析）
- interactive：加載外部資源階段時
- complete：加載完成時
Dom Load
DOM在完全加載完成之后會觸發load事件，此時如果想做點事情的話，可以這么寫
window.onload=function(){ //do something alert('something finished！') }
注意，不要寫成document.onload，因為在大多數瀏覽器中，在document上監聽load事件是無效的，應當在window上監聽。
使用jQuery的寫法
$(window).load(function(){ //do something alert('something finished！') })
這就是Dom Load，他的作用就是，在DOM以及其中的圖片等其他外部文件全部加載完畢之后觸發。
考慮一下下面的代碼在執行時，會先彈出哪個窗口。
<script> window.onload=function(){ alert('load finished！') } document.addEventListener('DOMContentLoaded',function(){ alert('ready finished！') }) </script> <body> <h1>這是一個 JavaScript 測試程序</h1> </body>
參考：
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
https://www.w3.org/TR/html5/syntax.html#the-end
JavaScript標准參考教程http://javascript.ruanyifeng.com/dom/document.html