資源載入和頁面事件 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(){

}           

$(document).load(function(){

});           

document.ready的實作

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();
            }
        });
    }
}           

$(function(){

});

$(document).ready(function(){

});

//jquery中默覺得document對象
$().ready(function(){

});