jQuery有3種針對文檔加載的方法

$(document).ready(function() {
    // ...代碼...
})
//document ready 簡寫
$(function() {
    // ...代碼...
})
$(document).load(function() {
    // ...代碼...
})

一個是ready一個是load，這兩個到底有什么區(qū)別呢？

ready與load誰先執(zhí)行：
大家在面試的過程中，經常會被問到一個問題：ready與load那一個先執(zhí)行，那一個后執(zhí)行？答案是ready先執(zhí)行，load后執(zhí)行。

DOM文檔加載的步驟：
要想理解為什么ready先執(zhí)行，load后執(zhí)行就要先了解下DOM文檔加載的步驟：

(1) 解析HTML結構。
(2) 加載外部腳本和樣式表文件。
(3) 解析并執(zhí)行腳本代碼。
(4) 構造HTML DOM模型。//ready
(5) 加載圖片等外部文件。
(6) 頁面加載完畢。//load

從上面的描述中大家應該已經理解了吧，ready在第（4）步完成之后就執(zhí)行了，但是load要在第（6）步完成之后才執(zhí)行。

結論：

ready與load的區(qū)別就在于資源文件的加載，ready構建了基本的DOM結構，所以對于代碼來說應該越快加載越好。在一個高速瀏覽的時代，沒人愿意等待答案。假如一個網(wǎng)站頁面加載超過4秒，不好意思，你1/4的用戶將面臨著流失，所以對于框架來說用戶體驗是至關重要的，我們應該越早處理DOM越好，我們不需要等到圖片資源都加載后才去處理框架的加載，圖片資源過多l(xiāng)oad事件就會遲遲不會觸發(fā)。

我們看看jQuery是如何處理文檔加載時機的問題：

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {
        readyList = jQuery.Deferred();
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );
        } else {
            document.addEventListener( "DOMContentLoaded", completed, false );
            window.addEventListener( "load", completed, false );
        }
    }
    return readyList.promise( obj );
};

jQuery的ready是通過promise給包裝過的，這也是jQuery擅長的手法，統(tǒng)一了回調體系，以后我們會重點談到。
可見jQuery兼容的具體策略：針對高級的瀏覽器，我們當前很樂意用DOMContentLoaded事件了，省時省力。

那么舊的IE如何處理呢？

繼續(xù)看jQuery的方案：

// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", completed );
// If IE and not a frame
// continually check to see if the document is ready
var top = false;
try {
    top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
    (function doScrollCheck() {
        if ( !jQuery.isReady ) {
            try {
                // Use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                top.doScroll("left");
            } catch(e) {
                return setTimeout( doScrollCheck, 50 );
            }
            // detach all dom ready events
            detach();

            // and execute any waiting functions
            jQuery.ready();
        }
    })();
}

    如果瀏覽器存在 document.onreadystatechange 事件，當該事件觸發(fā)時，如果 document.readyState=complete 的時候，可視為 DOM 樹已經載入。不過，這個事件不太可靠，比如當頁面中存在圖片的時候，可能反而在 onload 事件之后才能觸發(fā)，換言之，它只能正確地執(zhí)行于頁面不包含二進制資源或非常少或者被緩存時作為一個備選吧。

針對IE的加載檢測

Diego Perini 在 2007 年的時候，報告了一種檢測 IE 是否加載完成的方式，使用 doScroll 方法調用，詳情可見http://javascript.nwbox.com/IEContentLoaded/。
原理就是對于 IE 在非 iframe 內時，只有不斷地通過能否執(zhí)行 doScroll 判斷 DOM 是否加載完畢。在上述中間隔 50 毫秒嘗試去執(zhí)行 doScroll，注意，由于頁面沒有加載完成的時候，調用 doScroll 會導致異常，所以使用了 try -catch 來捕獲異常。
結論：所以總的來說當頁面 DOM 未加載完成時，調用 doScroll 方法時，會產生異常。那么我們反過來用，如果不異常，那么就是頁面DOM加載完畢了。

這都是我們在第一時間內處理ready加載的問題，如果ready在頁面加載完畢后呢？

jQuery就必須針對這樣的情況跳過綁定了：

if ( document.readyState === "complete" ) {
     // Handle it asynchronously to allow scripts the opportunity to delay ready
     setTimeout( jQuery.ready );
 }

直接通過查看readyState的狀態(tài)來確定頁面的加載是否完成了。這里會給一個定時器的最小時間后去執(zhí)行，主要保證執(zhí)行的正確。