window.onload和DOMContentLoaded的區別

時間 2019-11-20

標籤 window.onload window onload domcontentloaded 區別欄目 JavaScript 简体版

原文原文鏈接

1、什麼時候觸發這兩個事件？javascript

一、當 onload 事件觸發時，頁面上全部的DOM，樣式表，腳本，圖片，flash都已經加載完成了。css

二、當 DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash。html

2、爲何要區分？前端

開發中咱們常常須要給一些元素的事件綁定處理函數。但問題是，若是那個元素尚未加載到頁面上，可是綁定事件已經執行完了，是沒有效果的。這兩個事件大體就是用來避免這樣一種狀況，將綁定的函數放在這兩個事件的回調中，保證能在頁面的某些元素加載完畢以後再綁定事件的函數。java

固然DOMContentLoaded機制更加合理，由於咱們能夠容忍圖片，flash延遲加載，卻不能夠容忍看見內容後頁面不可交互。jquery

這裏又要牽扯到頁面加載渲染的原理了：web

一、加載樣式表會阻塞外鏈腳本的執行promise

　　一些Gecko和Webkit引擎版本的瀏覽器，包括IE8在內，會同時發起多個Http請求來並行下在樣式表和腳本。但腳本不會被執行，直到樣式被加載完成。在未加載完以前甚至頁面也不會被渲染。可是在opera中樣式的加載不會阻塞腳本的執行。瀏覽器

　　所以：目前通用的做法是把腳本和樣式都之外鍊形式引入，甚至在jquery的官方文檔中也是這樣推薦的。對於大部分腳原本說，這樣的腳本等待外鏈的機制仍是有意義的，好比一些DOM和樣式操做須要讀取元素的位置，顏色等。這就須要樣式先於腳本加載前端框架

檢驗方法：嘗試強制使服務器端使style延遲一段時間才加載（甚至10秒），測試的結果是，在某些版本的Firefox，Chrome中最後一段腳本仍然是能夠讀出style的屬性值（由於style始終先於javascript加載），好比#FF0000或者rgb(255, 0, 0)，而這驗證了我上面的說法。而在opera中卻沒法讀出style的屬性。代碼以下：

html 文件內容
<!DOCTYPE html>
<head>
    <linkrel="stylesheet"href="stylesheet.css">
    <scriptsrc="script.js"></script>
</head>
<body>
    <divid="element">The element</div><
/body>
</html>


stylesheet.css 文件內容
#element { color: red; }


script.js文件內容
document.addEventListener('DOMContentLoaded',function(){
     alert(getComputedStyle(document.getElementById('element'),null).color);},
false);

二、各大javascript框架如何實現domReady事件的

早期版本的瀏覽器是沒有DOMContentLoaded事件的那麼它們怎麼模擬實現相似功能呢？先來講說原理

(1)、若是是webkit引擎則輪詢document的readyState屬性，當值爲loaded或者complete時則觸發DOMContentLoaded事件，對webkit525以後版本直接能夠註冊DOMContentLoaded事件

if(Browser.Engine.webkit){  
    timer = window.setInterval(function(){
　　if(/loaded|complete/.test(document.readyState))  
      fireContentLoadedEvent();
　　},0);
}

(2)、IE處理方式有多種

a、在頁面臨時插入一個script元素，並設置defer屬性，最後把該腳本加載完成視做DOMContentLoaded事件來觸發。這樣作有一個問題是，若是插入腳本的頁面包含iframe的話，會等到iframe加載完才觸發，其實這與onload是無異的。即這個方法不許確。

b、經過setTiemout來不斷的調用documentElement的doScroll方法，直到調用成功則出觸發DOMContentLoaded。這樣作的原理是在IE下，DOM的某些方法只有在DOM解析完成後才能夠調用，doScroll就是這樣一個方法，反過來當能調用doScroll的時候便是DOM解析完成之時，與prototype中的document.write相比，該方案能夠解決頁面有iframe時失效的問題

c、首先註冊document的onreadystatechange事件，但經測試後該方法與window.onload至關，效果不大。下面是jquery作的兼容性處理代碼。

document.attachEvent("onreadystatechange",
　　function(){
　　　　if( document.readyState ==="complete"){  
　　        document.detachEvent("onreadystatechange", arguments.callee );  
        jQuery.ready();}
});

接下來具體看一看幾大前端框架是如何綜合運用這幾個方法的。

jQuery.ready.promise = function( obj ) {//定義一個狀態機
    if ( !readyList ) {//保證頁面只建立一個延遲對象，屢次使用$.ready() 則直接使用延遲對象done方法加入回調隊列
 
        readyList = jQuery.Deferred();//異步延遲對象
 　　　　   // readyRE = /complete|loaded|interactive/,
        // 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" ) {//

　　　　　　　　　　這個屬性是隻讀的，傳回值有如下的可能：

　　　　　　　　　　//0-UNINITIALIZED：XML 對象被產生，但沒有任何文件被加載。
　　　　　　　　　　//1-LOADING：加載程序進行中，但文件還沒有開始解析。
　　　　　　　　　　//2-LOADED：部分的文件已經加載且進行解析，但對象模型還沒有生效。
　　　　　　　　　　//3-INTERACTIVE：僅對已加載的部分文件有效，在此狀況下，對象模型是有效但只讀的。
　　　　　　　　　　//4-COMPLETED：文件已徹底加載，表明加載成功

// Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );
 
        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {//符合W3C標準的瀏覽器
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );
 
            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );//仍是給load事件註冊了事件，以防不測，作爲回滾用
 
        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );
 
            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );
 
            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;
 
            try {//判斷是否爲iframe，若是不是的話採用不斷的輪詢scorll的方法
                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 );
                        }
 
                        // detach all dom ready events
                        detach();
 
                        // and execute any waiting functions
                        jQuery.ready();//實際：readyList.resolveWith( document, [ jQuery ] );

                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};

再貼上幾段其餘框架的代碼，大同小異，就不具體分析了

prototype

(function(GLOBAL) {
  /* Support for the DOMContentLoaded event is based on work by Dan Webb,
     Matthias Miller, Dean Edwards, John Resig, and Diego Perini. */
  
  var TIMER;
  
  function fireContentLoadedEvent() {
    if (document.loaded) return;
    if (TIMER) window.clearTimeout(TIMER);
    document.loaded = true;
    document.fire('dom:loaded');
  }
  
  function checkReadyState() {
    if (document.readyState === 'complete') {
      document.detachEvent('onreadystatechange', checkReadyState);
      fireContentLoadedEvent();
    }
  }
  
  function pollDoScroll() {
    try {
      document.documentElement.doScroll('left');
    } catch (e) {
      TIMER = pollDoScroll.defer();
      return;
    }
    
    fireContentLoadedEvent();
  }


  if (document.readyState === 'complete') {
    // We must have been loaded asynchronously, because the DOMContentLoaded
    // event has already fired. We can just fire `dom:loaded` and be done
    // with it.
    fireContentLoadedEvent();
    return;
  }
  
  if (document.addEventListener) {
    // All browsers that support DOM L2 Events support DOMContentLoaded,
    // including IE 9.
    document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
  } else {
    document.attachEvent('onreadystatechange', checkReadyState);
    if (window == top) TIMER = pollDoScroll.defer();
  }
  
  // Worst-case fallback.
  Event.observe(window, 'load', fireContentLoadedEvent);
})(this);

mootools

(function(GLOBAL) {
  /* Support for the DOMContentLoaded event is based on work by Dan Webb,
     Matthias Miller, Dean Edwards, John Resig, and Diego Perini. */
  
  var TIMER;
  
  function fireContentLoadedEvent() {
    if (document.loaded) return;
    if (TIMER) window.clearTimeout(TIMER);
    document.loaded = true;
    document.fire('dom:loaded');
  }
  
  function checkReadyState() {
    if (document.readyState === 'complete') {
      document.detachEvent('onreadystatechange', checkReadyState);
      fireContentLoadedEvent();
    }
  }
  
  function pollDoScroll() {
    try {
      document.documentElement.doScroll('left');
    } catch (e) {
      TIMER = pollDoScroll.defer();
      return;
    }
    
    fireContentLoadedEvent();
  }


  if (document.readyState === 'complete') {
    // We must have been loaded asynchronously, because the DOMContentLoaded
    // event has already fired. We can just fire `dom:loaded` and be done
    // with it.
    fireContentLoadedEvent();
    return;
  }
  
  if (document.addEventListener) {
    // All browsers that support DOM L2 Events support DOMContentLoaded,
    // including IE 9.
    document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
  } else {
    document.attachEvent('onreadystatechange', checkReadyState);
    if (window == top) TIMER = pollDoScroll.defer();
  }
  
  // Worst-case fallback.
  Event.observe(window, 'load', fireContentLoadedEvent);
})(this);

紙上學來終覺淺，絕知此事要躬行。本身寫一段。

(function(window,undefined){
    hobo = {}
    var readyList = [],
    _isReady =false;

    function readyFn(){
        console.log(event.type)
        if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
            detach();

             _isReady =true;

            fireReady();
　　　　　　　　
   
         }
    }
　　　　
　　function fireReady(){

　　　　　　for (var i = 0,fn; fn = readyList[i++];) {
                fn();
          };

　　　　　　readyList = null;

　　　　　　fireReady = function(){}//惰性函數，防止IE9二次調用

　　}


    function detach() {
        if ( document.addEventListener ) {
            
            document.removeEventListener( "DOMContentLoaded", readyFn, false );
            window.removeEventListener( "load", readyFn, false );

        } else {
            document.detachEvent( "onreadystatechange", readyFn );
            window.detachEvent( "onload", readyFn );
        }
    }


    hobo.ready = function(fn){
         if(readyList){
            readyList.push(fn)
         }

         if(readyList.length>1){
            return;
         }   

         if(document.readyState === 'complete'){
            setTimeout(readyFn);
         }else if (document.addEventListener) {//符合W3C 則監聽 DOMContentLoaded和load事件
                 console.log('addEventListener')
                document.addEventListener('DOMContentLoaded',readyFn,false);
                document.addEventListener('DOMContentLoaded',readyFn,false);
         }else{//針對IE
                console.log('attachEvent')
            document.attachEvent('onreadystatechange',readyFn);

            document.attachEvent('onload',readyFn);
         }

            //針對IE而且非frame
            var top = false;
            try{
                top = window.frameElement===null&&document.documentElement
            }catch(e){}

            if(top&&top.doScroll){
                (function doScrollCheck(){
                    if (!_isReady) {
                         try {//每隔50秒輪詢 檢測是否支持doScroll()方法
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }
                    };
                })
            }

    }
    window.hobo =hobo
}(window,void 0))


//使用

hobo.ready(function(){
    console.log(11111);
})
hobo.ready(function(){
    console.log(22222);
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。