只要使用過jQuery的，想必對ready都不陌生，$(function(){})和$(document).ready(function(){})的使用更是習以為常。
要說到window.onload與document.ready的區別也能談出個一二，最重要的區別就是：
window.onload是在dom文檔樹以及所有文件都加載完成後，才執行；
而document.ready是，只要dom文檔樹加載完，就執行，且當dom文檔樹加載完就執行的好處就是，當頁面中的圖片等外部資源過多時，window.onload遲遲不能觸發，這時若還沒有綁定事件，用戶點擊按鈕時沒有反應，這不影響用戶體驗麼。
咦，Jquery的ready這麼牛逼，那Jquery是怎麼實現ready這個函數的呢？我們不妨一起來探究探究。
以下Jquery.ready的源碼，截自於jQuery 1.12.0。
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called
// after the browser event has already occurred.
// we once tried to use readyState "interactive" here,
// but it caused issues like the one
// discovered by ChrisS here:
// http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
window.setTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed );
// If IE event model is used
} else {
// 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 window.setTimeout( doScrollCheck, 50 );
}
// detach all dom ready events
detach();
// and execute any waiting functions
jQuery.ready();
}
} )();
}
}
}
return readyList.promise( obj );
};
從上面的源碼中，可以看出，jQuery.ready主要通過以下幾個東東來判斷dom文檔樹是否加載完成：
（1） document.readyState
（2） DOMContentLoaded
（3） onreadystatechange
（4） doScroll
下面，我們就一步一步來解析
1、 document.readyState
readyState是個什麼東東呢？它是document的一個屬性值，返回當前文檔的狀態，該屬性會根據文檔加載情況，返回如下幾個屬性值：
屬性值
意義
uninitialized
還未開始載入
loading
載入中
interactive
已加載，文檔與用戶可以開始交互
complete
載入完成
從屬性值，可得知，倘若當我們判斷document.readyState為complete，那麼DOM文檔樹就是加載完畢。但，從上面源碼注釋（6--11行）中可以得知ChrisS發現了一個很特別的問題，所以我們在判斷document.readyState === ‘complete’後，執行jQuery.ready，需要延遲一下。但上面的代碼中，怎麼沒有延遲時間呢？
那是因為倘若我們沒有設置延遲時間，setTimeout就會根據當前浏覽器及操作系統，自動給它設定一個最小延遲時間。在《JavaScript忍者的秘密》中曾提到：
2、 DOMContentLoaded事件
從上面的源代碼注釋中，可以看出DOMContentLoaded是基於標准的浏覽器的。
那麼它的作用是什麼呢？
當DOM文檔樹加載完成後，即觸發。
所以可以在標准的浏覽器中判斷DOMContentLoaded，來判斷DOM樹，是否加載完成。
3、 onreadystatechange事件
上面的DOMContentLoaded事件是基於標准的浏覽器的，那倘若不標准的呢，如IE，則使用onreadystatechange事件。
咦，怎麼感覺如此熟悉。
XMLHttpRequest—>Ajax。想起來了麼。在IE中onreadystatechange是私有化的，即所有元素都存在onreadystatechange事件，而W3C標准中，僅XMLHttpRequest對象中存在onreadystatechange事件。所以當事件觸發時，倘若onreadystatechange === complete，則可視為DOM樹加載完成。
4、 doScroll
從上面的源碼中的注釋（49--50行），可得，Diego Perini報告一種檢測IE下DOM文檔是否加載完成的方法，即，使用doScroll。
咦，上面onreadystatechange事件，不是能處理了嗎？！！
是的，但是它有個弊端，就是當頁面中存在圖片時，可能反而會晚於onload事件後，觸發。
為什麼呢？
因為我們是依據onreadystatechange === complete來判斷的嘛，如果圖片沒加載或者正在加載中，那麼onreadystatechange就不等於complete了哦。
所以為了保險起見，再用doScroll來檢測。
doScroll的原理就是，當頁面DOM未加載完成時，調用doScroll方法，會產生異常。所以利用try-catch來對doScroll捕獲異常就可以判斷DOM文檔是否加載完咯。
好了，jQuery.ready的源碼就解析到這兒，純屬自己觀點，有什麼不對，請狠狠拍磚且交流，謝謝。