jQuery源碼學習 之 ready與load事件 ---- day4

jQuery中ready與load事件

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

$(document).ready(function() {
    // ...code...
});
// document ready簡寫
$(function() {
    // ...code...
});
$(document).load(function() {
    // ...code...
});

2. ready和load的區別

二者的區別是：ready先於load執行。這裏我們要理解DOM文檔的加載順序：

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

從上面的步驟，我們應該已經理解了，ready在第（4）步完成之後就執行了，但是，load要在第（6）步完成之後才執行。

3. 結論

ready與load工區別就在於資源文件的加載，ready構建了基本的DOM結構，所以對於代碼來說應該越快加載越好。在一個高速瀏覽的時代，沒人願意等待答案。假如一個網站頁面加載超過4s，那你將面臨1/4用戶的流失，所以對於框架來說，用戶體驗是至關重要的，我們應該越早處理DOM越好，不需要等到圖片資源都加載後纔去處理框架的加載，圖片資源過多load事件就會遲遲不會觸發。

4. jQuery中的ready實現

jQuery.ready.promise = function(obj) {
    if(!readyList) {
        readyList = jQuery.Deferred();
        if(document.readyState === 'complete') {
            setTimeout(jQuery.ready);
        } else {
            document.addEventListener("DOMContentLoaded", completed, false);
            window.addEventListener("load", completed, false);
        }
    }
    return readyList.promise(obj);
};

jQuery的ready是通過promise給包裝過的，這也是jQuery擅長的手法，統一了回調系統。可見，jQuery兼容的具體策略：針對高級的瀏覽器，當前很樂意使用DOMContentLoaded事件，省時省力。

IE的處理方法：