資源加載和頁面事件 load, ready, DOMContentLoaded等

資源加載和頁面事件

理想的頁面加載方式

1. 解析HTML結構。
2. 加載并解析外部腳本。
3. DOM樹建構完成，執行腳本。//DOMInteractive –> DOMContentLoaded
4. 加載圖檔、樣式表檔案等外部檔案。
5. 頁面加載完畢。//window.onload

涉及到的事件

1. window.onload:

   當頁面全部加載完成（包括所有資源）

2. document.onload:

   當整個html文檔加載的時候就觸發了，也就是在body元素加載之前就開始執行了

3. DOMContentLoaded:

   當頁面的DOM樹解析好并且需要等待JS執行完才觸發

   DOMContentLoaded事件不直接等待CSS檔案、圖檔的加載完成

4. onreadytstatechange:

   當對象狀态變更時觸發這個事件，一旦document的readyState屬性發生變化就會觸發

defer和async

1. 沒有defer和async

   浏覽器會立即加載并執行指定的腳本，不等待後續載入的文檔元素，讀到就加載并執行。

   當加載腳本時會阻塞頁面的渲染。

2. 有async

   加載和渲染後續文檔元素的過程将和腳本的加載與執行并行進行，展現出來就是異步。

   async JS一旦下載下傳好了就會執行，是以很有可能不是按照原本的順序來執行的。

   如果腳本前後有依賴性，用async，就很有可能出錯。

3. 有defer

   加載後續文檔元素的過程将和腳本的加載并行進行，

   但是腳本的執行要在所有元素解析完成之後，DOMContentLoaded事件觸發之前完成。

   defer JS在DOMInteractive後執行，一旦執行完defer JS，就會觸發DOMContentLoaded。

   也就是說defer腳本總是在DOMInteractive事件與DOMContentLoaded事件之間的時間執行。

   defer JS在html頁面解析完畢之後再去執行，也就是類似于把這個腳本放在了頁面底部。

DOM的加載與解析

1. DOMLoading

   浏覽器開始解析dom樹的時間點

2. DOMInteractive

   表示浏覽器已經解析好dom樹了。

3. DOMContentLoaded

   同步的JS已經執行完畢了。

load的實作

作用：監控整個文檔（包括資源）是否加載完畢，所有資源加載完畢後觸發

原生js寫法：

window.onload = function(){

}
           

jquery寫法：

$(document).load(function(){

});
           

document.ready的實作

作用：監控dom是否加載完畢，dom加載完畢時及資源加載之前觸發

原生js寫法：

document.ready = function(callback) {
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function() {
            document.removeEventListener('DOMContentLoaded', arguments.callee, false);
            callback();
        }, false);
    }else if (document.attachEvent) {// 相容ie
        document.attachEvent('onreadytstatechange', function() {
            if (document.readyState == "complete") {
                document.detachEvent("onreadystatechange", arguments.callee);
                callback();
            }
        });
    }
}
           

以下為jquery的寫法：

$(function(){

});

$(document).ready(function(){

});

//jquery中預設為document對象
$().ready(function(){

});