碼上快樂

相關內容    簡體    繁體

DOM Ready 詳解

本文轉載自   查看原文   2016-09-20 17:38   2527    javascript

DOM Ready 概述    

熟悉jQuery的人, 都知道DomReady事件. window.onload事件是在頁面所有的資源都加載完畢后觸發的. 如果頁面上有大圖片等資源響應緩慢, 會導致window.onload事件遲遲無法觸發.所以出現了DOM Ready事件. 此事件在DOM文檔結構准備完畢后觸發, 即在資源加載前觸發. 另外我們需要在DOM准備完畢后, 再修改DOM結構, 比如添加DOM元素等. 否則有可能出現“Internet Explorer無法打開站點”的問題. 要模擬此錯誤, 可以在頁面上添加下面的代碼, 並用IE6打開:

<div>
    <script type="text/javascript">
        var div = document.createElement('div');
        div.innerHTML = "test";
        document.body.appendChild(div);
    </script>
</div>

    有關DOM Ready事件的實現,包括jQuery中的DomReady實現, 在國內和國外網站上已經早有人分享了經驗, 並提出了許多方法.

為了避免人雲亦雲, 抱着懷疑的態度, 我去研究了這些DOM Ready方法. 只會使用Google搜索或者jQuery等類庫, 不會幫助前端開發人員進步.所以弄懂其中的原理才是關鍵.

對於FF, Chrome, Safari, IE9等瀏覽器:

DOMContentLoaded 事件在許多Webkit瀏覽器以及IE9上都可以使用, 此事件會在DOM文檔准備好以后觸發, 包含在HTML5標准中. 對於支持此事件的瀏覽器, 直接使用DOMContentLoaded事件是最簡單最好的選擇.

對於IE6,7,8:

不幸的是, IE6,7,8都不支持DOMContentLoaded事件.所以目前所有的hack方法都是為了讓IE6,7,8支持DOM Ready事件.

鑒於下面的統計結果(2011年5月統計的數據), 我們必須支持IE6,7,8, 一個都不能少!

中國某音樂站:

clip_image001

CNZZ:

clip_image002

另外鑒於"360瀏覽器"的占有率, 還要支持"360+IE6"這種無敵組合.

 

DOM Ready 實現方法

首先總結一下目前IE下的DOM Ready方法:

(1)setTimeout : 在setTimeout中觸發的函數, 一定會在DOM准備完畢后觸發.

示例代碼:

   1: //setTimeout Dom Ready
   2: var setTimeoutReady = function(){
   3:     document.getElementById("divMsg").innerHTML += "<br/> setTimeout , readyState:" + document.readyState;
   4: };
   5: var setTimeoutBindReady = function(){
   6:     /in/.test(document.readyState)?setTimeout(arguments.callee, 1):setTimeoutReady();
   7: };
   8: setTimeoutBindReady();

(2)readyState: 判斷readyState的狀態是否為Complete, interactive等觸發

示例代碼:

   1: //onreadystatechange event
   2: document.onreadystatechange = function(e){
   3:     document.getElementById("divMsg").innerHTML += "<br/> onreadystatechange, readyState:" + document.readyState;
   4:  
   5: };

(3)外部script: 通過設置了script塊的defer屬性實現.

參見: http://dean.edwards.name/weblog/2005/09/busted/

示例代碼:

   1: <script type="text/javascript" src="ext-1.js" defer></script>

(4)內部script: 外部script的改進版本. 外部script需要頁面引用額外的js文件. 內部script方法可以避免此問題.

參見: http://dean.edwards.name/weblog/2006/06/again/

示例代碼:

   1: //script defer    Dom Ready    
   2: document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
   3: var script = document.getElementById("__ie_onload");
   4: script.onreadystatechange = function() {
   5:     if (this.readyState == "complete") {                
   6:         document.getElementById("divMsg").innerHTML += "<br/>internal script defer, readyState:" + document.readyState;
   7:     }
   8: };

(5)doScroll : 微軟的文檔只出doScroll必須在DOM主文檔准備完畢時才可以正常觸發. 所以通過doScroll判斷DOM是否准備完畢.

參見: http://javascript.nwbox.com/IEContentLoaded/

示例代碼:

    //doScroll
    var doScrollMoniterId = null;
    var doScrollMoniter = function(){
        try{
            document.documentElement.doScroll("left");
            document.getElementById("divMsg").innerHTML += "<br/>doScroll, readyState:" + document.readyState;
            if(doScrollMoniterId){
                clearInterval(doScrollMoniterId);
            }
        }
        catch(ex){
        }
    }
    doScrollMoniterId = setInterval(doScrollMoniter, 1);

 

 

DOM Ready 調研結論

測試結果見下面. 在這里先給出結論.

  • setTimeout設置的函數, 會在readyState為complete時觸發, 但是觸發時間點是在圖片資源加載完畢后.
  • readyState為interactive時, DOM結構並沒有穩定, 此時依然會有腳本修改DOM元素.
  • readyState為complete時, 圖片已經加載完畢, 實驗中對圖片加載設置了延時.所以complete雖然在window.onload前執行, 但是還是太晚.
  • 外部script:如果將此script放在頁面上方, 則無法穩定觸發. 並且觸發時DOM結構依然可能發生變化.
  • 內部script:與外部script同樣的問題, 觸發的時間過早.
  • doScroll: doScroll通過時readyState可能為interactive, 也可能為complete. 但是一定會在DOM結構穩定后, 圖片加載完畢前執行.

所以可以看出, 目前的setTimeout方法, 外部script和內部script方法, 都是存在錯誤的.應該說這些方法不能安全可靠的實現DomReady事件.

而單純使用readyState屬性是無法判斷出Dom Ready事件的. interactive狀態過早(DOM沒有穩定), complete狀態過晚(圖片加載完畢).

jQuery實現中使用的doScroll方法是目前唯一可用的方法.

在本文的最后, 提供了使用本原理實現的ready函數. 其實和jQuery中的Dom Ready原理幾乎一樣. 但是其中加入了延時, 可以指定win對象(即支持iframe)等功能.

360+IE6:

 
add DOM onload, readyState:interactive
internal script defer, readyState:interactive
[延時2秒加載js腳本]
add DOM in delay script, readyState:interactive
jQuery ready, readyState:interactive
doScroll, readyState:interactive
[延時8秒加載圖片]
onreadystatechange, readyState:complete
window.onload, readyState:complete
setTimeout , readyState:complete

添加了defer的的外部js都沒有執行.

對360這種沒有技術, 沒有任何優點, 單純的在IE上面加個外殼, 添加自己的產品和廣告的瀏覽器, 應該予以鄙視! 雖然憑借"安全衛士推薦用瀏覽器"占有了很多的國內市場, 從運維和產品層面看是成功的, 但是卻是不道德的. 所謂的"安全"只是一個幌子而已! 真正了解互聯網的用戶不應該使用360瀏覽器. 360安全衛士是一款不錯的產品, 最初的定位很好. 只是目前越做越大, 手伸的越來越深. 挾用戶威脅廠商的盈利模式.不許別人出廣告, 只能自己產品出廣告.當一款好的產品在一個沒有道德底線的人手里時, 用戶變得很難取舍.

IE6:

 
add DOM onload, readyState:interactive
[external script defer(1), readyState:interactive--經常無此項]
internal script defer, readyState:interactive
[延時2秒加載js腳本]
add DOM in delay script, readyState:interactive
external script defer (2), readyState:interactive
jQuery ready, readyState:interactive
doScroll, readyState:interactive
[延時8秒加載圖片]
onreadystatechange, readyState:complete
window.onload, readyState:complete
setTimeout , readyState:complete

第一個添加了defer的外部js, 時有時無. 大部分時間沒有.

IE7:

 
add DOM onload, readyState:interactive
[external script defer(1), readyState:interactive--經常無此項]
internal script defer, readyState:interactive
add DOM in delay script, readyState:interactive
external script defer (2), readyState:interactive
onreadystatechange, readyState:complete
jQuery ready, readyState:complete
window.onload, readyState:complete
setTimeout , readyState:complete

第一個添加了defer的外部js, 時有時無. 大部分時間沒有.

IE8:

 
add DOM onload, readyState:interactive
external script defer (1), readyState:interactive
internal script defer, readyState:interactive
external script defer (2), readyState:interactive
add DOM in delay script, readyState:interactive
onreadystatechange, readyState:complete
jQuery ready, readyState:complete
window.onload, readyState:complete
setTimeout , readyState:complete

IE9:

 
add DOM onload, readyState:interactive
external script defer (1), readyState:interactive
internal script defer, readyState:interactive
external script defer (2), readyState:interactive
add DOM in delay script, readyState:interactive
jQuery ready, readyState:interactive
onreadystatechange, readyState:complete
window.onload, readyState:complete
setTimeout , readyState:complete

 

DOM Ready實現代碼

下面是實現DOM Ready事件的函數代碼, 與jQuery的相比, 除了"__proxy函數"(在后面會講解), 其他的依賴函數都在ready的定義中, 易於理解和維護. 並且自己實現更加具有靈活性, 加入了時間延時已經傳遞window對象的能力:

        /**
        Dom Ready Event
        */
        ready : function( callback , delay, win){
            win = win || this.win || window;
            var doc = win.document;
            delay = delay || 0;
            this.domReadyMonitorRunTimes = 0;
            
            //將時間函數放入數組, 在DomReady時一起執行.
            this.readyFuncArray = this.readyFuncArray || [];
            this.readyFuncArray.push({func:callback, delay:delay, done:false});
            
            //domReadyMonitor為監控進程的事件處理函數
            var domReadyMonitor = (function(){
                var isReady = false;
                this.domReadyMonitorRunTimes++;
                
                //對於非iframe嵌套的ie6,7,8瀏覽器, 使用doScroll判斷Dom Ready.
                if(this.browser.ie && this.browser.ie<9 && !win.frameElement){
                    try {
                        doc.documentElement.doScroll("left");
                        isReady = true;
                    } 
                    catch(e) {
                    }
                }
                //非ie瀏覽器
                //如果window.onload和DOMContentLoaded事件都綁定失敗, 則使用定時器函數判斷readyState.                
                else if(doc.readyState==="complete" || this.domContentLoaded ){
                        isReady = true;
                }
                //對於某些特殊頁面, 如果readyState永遠不能為complete, 設置了一個最大運行時間5分鍾. 超過了最大運行時間則銷毀定時器.
                //定時器銷毀不影響window.onload和DOMContentLoaded事件的觸發.
                else{
                    if(this.domReadyMonitorRunTimes > 300000){
                        if(this.domReadyMonitorId){
                            win.clearInterval(this.domReadyMonitorId);
                            this.domReadyMonitorId = null;
                        }
                        return;
                    }
                }        
                
                   
                //執行ready集合中的所有函數
                if(isReady){
                    try{
                        if(this.readyFuncArray && this.readyFuncArray.length){
                            for(var i=0, count=this.readyFuncArray.length; i<count; i++){
                                var item = this.readyFuncArray[i];
                                if(!item || !item.func || item.done){
                                    continue;
                                }                                    
                                if(!item.delay){    
                                    item.done = true;
                                    item.func();
                                }
                                else{
                                    item.done = true;
                                    win.setTimeout(item.func, item.delay);
                                }
                            }
                        }
                    }
                    catch(ex){
                        throw ex;
                    }
                    finally{
                        if(this.domReadyMonitorId){
                            win.clearInterval(this.domReadyMonitorId);
                            this.domReadyMonitorId = null;
                        }
                    }
               }
            }).__proxy(this);    
            
            /**
            domContentLoadedHandler直接執行所有ready函數.
            沒使用傳參的形式是因為ff中的定時器函數會傳遞一個時間參數.
            */
            var domContentLoadedHandler = (function(){
                this.domContentLoaded = true;
                domReadyMonitor();
            }).__proxy(this);
            
            //啟動DomReady監控進程
            if(!this.domReadyMonitorStarted){
                this.domReadyMonitorStarted = true;    
                this.domReadyMonitorId = win.setInterval( domReadyMonitor, 50);
                // Mozilla, Opera and webkit nightlies currently support this event
                if ( doc.addEventListener ) {
                    // Use the handy event callback
                    doc.addEventListener( "DOMContentLoaded", domContentLoadedHandler, false );
                    // A fallback to window.onload, that will always work
                    win.addEventListener( "load", domContentLoadedHandler, false );                
                }
                else if(doc.attachEvent){
                    // A fallback to window.onload, that will always work
                    win.attachEvent( "onload", domContentLoadedHandler, false );    
                }
            }                    
        }

上面的ready函數, 使用了一個Function對象的__proxy方法. 這是因為ready函數定義在一個使用JSON格式創建的對象中:

var MyClass = {
    ready : function(){}
}

“__proxy”函數用於修改實現函數的this上下文, 與jQuery中的proxy函數類似, 但是為了使用更加優雅的語法, 所以注入到了Function原型中. 如果不需要修改this可以自行ready函數中對"___proxy"函數的依賴.

"__proxy"函數代碼如下:

            //擴展function函數原型。為所有的function對象添加proxy函數，用於修改函數的上下文。
            Function.prototype.__proxy = function(context){
                var method = this;
                return function () {
                    return method.apply(context || {}, arguments);
                };
            };

使用舉例:

   1:  
   2: //正常使用
   3: this.U.ready( this.windowOnLoadHandler );
   4: //延時2秒加載
   5: this.U.ready(this.windowOnLoadDelayHandler, 2000);

轉載：張子秋 http://www.cnblogs.com/zhangziqiu/ 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 DOM何時Ready jquery的ready方法（DOM是否加載完）詳解與使用 JavaScript學習總結【9】、DOM Ready jQuery.ready() 函數詳解 DOM詳解 ready是先執行的，load后執行，DOM文檔的加載步驟 DOM加載過程中ready和load的區別 JQuery的ready函數與JS的onload的區別詳解 JQuery的ready函數與JS的onload的區別詳解 jQuery document window load ready 區別詳解
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM