javascript原生判斷DOM是否加載完畢執行方法-有解無憂

A-首先附加一段jquery的1.8.2的相關腳本：

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
            setTimeout( jQuery.ready, 1 );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", jQuery.ready, false );

        // If IE event model is used
        } else {
            // Ensure firing before onl oad, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", jQuery.ready );

            // 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 setTimeout( doScrollCheck, 50 );
                        }

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};

B-下面列一下轉載文章內容：

(1)在chrome瀏覽器的開發程序中，我們會看到network面板中有這兩個數值，分別對應網絡請求上的標志線，這兩個時間數值分別代表什么？

(2)我們一再強調將css放在頭部，將js檔案放在尾部，這樣有利于優化頁面的性能，為什么這種方式能夠優化性能？

(3)在用jquery的時候，我們一般都會將函式呼叫寫在ready方法內，這是什么原理？

首先看一下

DOMContentLoaded顧名思義，就是dom內容加載完畢，那什么是dom內容加載完畢呢？我們從打開一個網頁說起，當輸入一個URL，頁面的展示首先是空白的，然后過一會，頁面會展示出內容，但是頁面的有些資源比如說圖片資源還無法看到，此時頁面是可以正常的互動，過一段時間后，圖片才完成顯示在頁面，從頁面空白到展示出頁面內容，會觸發DOMContentLoaded事件，而這段時間就是HTML檔案被加載和決議完成，

這時候問題又來了，什么是HTML檔案被加載和決議完成，要解決這個問題，我們就必須了解瀏覽器渲染原理，

當我們在瀏覽器地址輸入URL時，瀏覽器會發送請求到服務器，服務器將請求的HTML檔案發送回瀏覽器，瀏覽器將檔案下載下來后，便開始從上到下決議，決議完成之后，會生成DOM，如果頁面中有css，會根據css的內容形成CSSOM，然后DOM和CSSOM會生成一個渲染樹，最后瀏覽器會根據渲染樹的內容計算出各個節點在頁面中的確切大小和位置，并將其繪制在瀏覽器上，

下面就是頁面加載和決議程序中，瀏覽器的一個快照

上面我們看到在決議html的程序中，html的決議會被中斷，這是因為javascript會阻塞dom的決議，當決議程序中遇到<script>標簽的時候，便會停止決議程序，轉而去處理腳本，如果腳本是行內的，瀏覽器會先去執行這段行內的腳本，如果是外鏈的，那么先會去加載腳本，然后執行，在處理完腳本之后，瀏覽器便繼續決議HTML檔案，

同時javascript的執行會受到標簽前面樣式檔案的影響，如果在標簽前面有樣式檔案，需要樣式檔案加載并決議完畢后才執行腳本，這是因為javascript可以查詢物件的樣式，

這里需要注意一點，在現在瀏覽器中，為了級訓渲染被阻塞的情況，現代的瀏覽器都使用了猜測預加載，當決議被阻塞的時候，瀏覽器會有一個輕量級的HTML（或CSS）掃描器（scanner）繼續在檔案中掃描，查找那些將來可能能夠用到的資源檔案的url，在渲染器使用它們之前將其下載下來，

在這里我們可以明確DOMContentLoaded所計算的時間，當檔案中沒有腳本時，瀏覽器決議完檔案便能觸發 DOMContentLoaded 事件；如果檔案中包含腳本，則腳本會阻塞檔案的決議，而腳本需要等位于腳本前面的css加載完才能執行，在任何情況下，DOMContentLoaded 的觸發不需要等待圖片等其他資源加載完成，

接下來，我們來說說load，頁面上所有的資源（圖片，音頻，視頻等）被加載以后才會觸發load事件，簡單來說，頁面的load事件會在DOMContentLoaded被觸發之后才觸發，

我們在 jQuery 中經常使用的 $(document).ready(function() { // ...代碼... }); 其實監聽的就是 DOMContentLoaded 事件，而 $(document).load(function() { // ...代碼... }); 監聽的是 load 事件，在用jquery的時候，我們一般都會將函式呼叫寫在ready方法內，就是頁面被決議后，我們就可以訪問整個頁面的所有dom元素，可以縮短頁面的可互動時間，提高整個頁面的體驗，

下面我們在來看看如何實作這兩個函式

1、onload事件

onload事件所有的瀏覽器都支持，所以我們不需要什么兼容，只要通過呼叫

window.onload = function(){
    
}

2、DOMContentLoaded 事件

DOMContentLoaded不同的瀏覽器對其支持不同，所以在實作的時候我們需要做不同瀏覽器的兼容，

1）支持DOMContentLoaded事件的，就使用DOMContentLoaded事件；

2）IE6、IE7不支持DOMContentLoaded，但它支持onreadystatechange事件，該事件的目的是提供與檔案或元素的加載狀態有關的資訊，

3) 更低的ie還有個特有的方法doScroll，通過間隔呼叫：document.documentElement.doScroll("left");

可以檢測DOM是否加載完成，當頁面未加載完成時，該方法會報錯，直到doScroll不再報錯時，就代表DOM加載完成了，該方法更接近DOMContentLoaded的實作，

function ready(fn){

    if(document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function() {
            document.removeEventListener('DOMContentLoaded',arguments.callee, false);
            fn();
        }, false);
    } 

    // 如果IE
    else if(document.attachEvent) {
        // 確保當頁面是在iframe中加載時，事件依舊會被安全觸發
        document.attachEvent('onreadystatechange', function() {
            if(document.readyState == 'complete') {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn();
            }
        });

        // 如果是IE且頁面不在iframe中時，輪詢呼叫doScroll 方法檢測DOM是否加載完畢
        if(document.documentElement.doScroll && typeof window.frameElement === "undefined") {
            try{
                document.documentElement.doScroll('left');
            }
            catch(error){
                return setTimeout(arguments.callee, 20);
            };
            fn();
        }
    }
};

最后我們來回答這個問題：我們為什么一再強調將css放在頭部，將js檔案放在尾部

在面試的程序中，經常會有人在回答頁面的優化中提到將js放到body標簽底部，原因是因為瀏覽器生成Dom樹的時候是一行一行讀HTML代碼的，script標簽放在最后面就不會影響前面的頁面的渲染，那么問題來了，既然Dom樹完全生成好后頁面才能渲染出來，瀏覽器又必須讀完全部HTML才能生成完整的Dom樹，script標簽不放在body底部是不是也一樣，因為dom樹的生成需要整個檔案決議完畢，

我們再來看一下chrome在頁面渲染程序中的，綠色標志線是First Paint的時間，納尼，為什么會出現firstpaint，頁面的paint不是在渲染樹生成之后嗎？其實作代瀏覽器為了更好的用戶體驗,渲染引擎將嘗試盡快在螢屏上顯示的內容，它不會等到所有HTML決議之前開始構建和布局渲染樹，部分的內容將被決議并顯示，也就是說瀏覽器能夠渲染不完整的dom樹和cssom，盡快的減少白屏的時間，假如我們將js放在header，js將阻塞決議dom，dom的內容會影響到First Paint，導致First Paint延后，所以說我們會將js放在后面，以減少First Paint的時間，但是不會減少DOMContentLoaded被觸發的時間，

文章轉載地址：DOMContentLoaded與load的區別

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/63859.html

標籤：JavaScript

上一篇：JS遍歷物件的幾種方法

下一篇：layui初識