JavaScript 判斷 DOM 何時加載完畢

三十的狼 2019-02-11

展開全文

處理HTML DOM文檔存在一個難題是，JavaScript可以在DOM完全加載之前執(zhí)行，這會給你的代碼引發(fā)不少的潛在問題。瀏覽器的渲染和操作順序大致如下列表：

HTML解析完畢
外部腳本和樣式表加載完畢
腳本在文檔內(nèi)解析并執(zhí)行
HTML DOM完全構(gòu)造起來
圖片和外部內(nèi)容加載
網(wǎng)頁完成加載

在網(wǎng)頁頭部并且從外部文件加載的腳本會在HTML真正構(gòu)造之前執(zhí)行。如前所述，這是個至關(guān)重要的問題，因為這兩處執(zhí)行的腳本并不能訪問還不存在的DOM。幸好，我們還有若干的補救方法。

目前，最常用的級數(shù)是完全等待整個頁面加載完畢才執(zhí)行DOM操作。這種技術(shù)只需利用window對象的load事件來綁定一個函數(shù)，頁面加載完畢即可觸發(fā)。

addEvent(window, "load", function(){
    // do something
});

最簡單的操作卻是最慢的。在加載過程的順序列表中，你會注意到頁面的加載完畢與否完全被最后一步所掌控。這就是說，如果頁面有很多的圖片、視頻等，用戶可能得登上一段時間JavaScript才執(zhí)行。

另一種級數(shù)可用以監(jiān)聽 DOM 加載狀態(tài)，可能是最復(fù)雜的（從實現(xiàn)角度來看），但也是最有效地。

這項技術(shù)在不堵塞瀏覽器加載的情況下盡可能快地檢查 HTML DOM文檔是否已經(jīng)加載了執(zhí)行所必須得屬性。以下是檢查HTML DOM是否可用的幾個要點：

document: 你需要知道DOM文檔是否已經(jīng)加載。若能足夠快地檢查，運氣好的話你會看到undefined。
document.getElementsByTagName和document.getElementById：頻繁使用document.getElementsByTagName和document.getElementById函數(shù)檢查文檔，當(dāng)存在這些函數(shù)則表明DOM已經(jīng)加載完畢。
document.body: 作為額外補充，檢查元素是否已經(jīng)完全加載。理論上前一個檢查應(yīng)該已經(jīng)能做出判斷，但我發(fā)現(xiàn)有些情況下還是不夠。

使用這些檢查就足夠判斷DOM是否可用了（“足夠”在此表示可能會有一定毫秒級的時間差）。這個方法幾乎沒有瑕疵。單獨使用前述檢查，腳本應(yīng)該可以在現(xiàn)代瀏覽器中運行得相對良好。但是，最近（2008年?）Firefox實現(xiàn)了緩存改進(jìn)，使得window加載事件實際上可以在腳本能檢查到DOM是否可用之前觸發(fā)。為了能發(fā)揮這個優(yōu)勢，我同時為window加載事件附加檢查，以期能獲得更快的執(zhí)行速度。

最后，domReady函數(shù)集合了所有需要在DOM可用時就執(zhí)行的函數(shù)的引用。一旦DOM被認(rèn)為是可用的，就調(diào)用這些引用并按順序一一執(zhí)行。

// 監(jiān)聽 DOM 是否可用的函數(shù)
function domReady(f) {
    // 假如DOM已經(jīng)加載，馬山執(zhí)行函數(shù)
    if(domReady.done) return f();

    // 假如我們已經(jīng)增加了一個函數(shù)
    if(domReady.timer) {
        // 把它假如待執(zhí)行函數(shù)清單中
        domReady.ready.push(f);
    } else {
        // 為頁面加載完畢綁定一個事件，以防它最先完成。
        addEvent(window, "load", isDOMReady);
        // 初始化執(zhí)行函數(shù)的數(shù)組
        domReady.ready = [f];
        // 盡可能快的檢查DOM是否已可用
        domReady.timer = setInterval(isDOMReady, 13);
    }
}

// 檢查 DOM 是否已可操作
function isDOMReady() {
    // 如果我們能判斷出DOM已可能，忽略
    if(domReady.done) return false;

    // 檢查若干函數(shù)和元素是否可能
    if(document && document.getElementsByTagName && document.getElementById && document.body) {
        // 如果可用，我們停止檢查
        clearInterval(domReady.timer);
        domReady.timer = null;

        // 執(zhí)行所有正在等待的函數(shù)
        for(var i = 0; i < domReady.ready.length; i++) {
            domReady.ready[i]();
            // 記錄我們在此已經(jīng)完成
            domReady.ready = null;
            domReady.done = true;
        }
    }
}

現(xiàn)在我們來看看在HTML文檔中是如何執(zhí)行的。假設(shè)已經(jīng)將domReady函數(shù)寫到一個名為domready.js的外部文件中

<html>
    <head>
        <title> Testing DOM Loading</title>
        <script src="domready.js"></script>
        <script>
            domReady(function(){
                alert("The DOM is loaded!");
                // do something
            });
        </script>
    </head>
    <body>
        <h1>Testing DOM Loading</h1>
        <!-- 這里是大量的HTML -->
    </body>
</html>