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

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

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

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

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

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

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

結(jié)論：

ready與load的區(qū)別就在于資源文件的加載，ready構(gòu)建了基本的DOM結(jié)構(gòu)，所以對于代碼來說應(yīng)該越快加載越好。在一個高速瀏覽的時代，沒人愿意等待答案。假如一個網(wǎng)站頁面加載超過4秒，不好意思，你1/4的用戶將面臨著流失，所以對于框架來說用戶體驗是至關(guān)重要的，我們應(yīng)該越早處理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)一了回調(diào)體系，以后我們會重點談到。
可見jQuery兼容的具體策略：針對高級的瀏覽器，我們當(dāng)前很樂意用DOMContentLoaded事件了，省時省力。

那么舊的IE如何處理呢？

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

// Ensure firing before onload, maybe late but safe also for iframesdocument.attachEvent( "onreadystatechange", completed );// A fallback to window.onload, that will always workwindow.attachEvent( "onload", completed );// If IE and not a frame// continually check to see if the document is readyvar 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 事件，當(dāng)該事件觸發(fā)時，如果 document.readyState=complete 的時候，可視為 DOM 樹已經(jīng)載入。不過，這個事件不太可靠，比如當(dāng)頁面中存在圖片的時候，可能反而在 onload 事件之后才能觸發(fā)，換言之，它只能正確地執(zhí)行于頁面不包含二進制資源或非常少或者被緩存時作為一個備選吧。

針對IE的加載檢測

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

這都是我們在第一時間內(nèi)處理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í)行的正確。