从onload和DOMContentLoaded谈起

最新推荐文章于 2023-10-16 15:29:19 发布

张广森

最新推荐文章于 2023-10-16 15:29:19 发布

阅读量2.2k

点赞数 1

分类专栏： js

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

来源：http://www.tuicool.com/articles/aae2me

这篇文章是对这一两年内几篇dom ready文章的汇总（文章的最后会标注参考文章），因为浏览器进化的关系，可能他们现在的行为与本文所谈到的一些行为不相符。我也并没有一一去验证，所以本文仅供参考，在具体开发中还是要以实践结果为准。

当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。

当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

我们需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函数。

当然DOMContentLoaded机制更加合理，因为我们可以容忍图片，flash延迟加载，却不可以容忍看见内容后页面不可交互。

大家可以再这里看到很明显的效果。

在没有出现DOMContentLoaded事件出现以前，许多类库中都有模拟这个事件的方法，比如jQuery中著名的 $(document).ready(function(){}); 。稍后把各个类库中实现DOMcontentLoaded的方法整理一下

接下来看一些DOMContentLoaded的边界情况

虽然文档称该事件仅当在DOM加载完成之后触发，实际上并非如此

在某些版本的Gecko和Webkit引擎的浏览器中，有些情况会使等待样式表加载完成后才触发DOMContentLoaded事件。最普遍的情况是 <script src=""> 跟在一个<link rel="stylesheet"> 之后，无论这个script标签是在head还是在body中，只要跟在link的后面。比下面这个栗子

Html:

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

stylesheet.css:

#element { color: red; }

script.js

document.addEventListener('DOMContentLoaded',function(){
     alert(getComputedStyle(document.getElementById('element'),null).color);},
false);

你可以尝试强制使服务器端使style延迟一段时间才加载（甚至10秒），测试的结果是，在某些版本的Firefox，Chrome中最后一段脚本仍然是可以读出style的属性值（因为style始终先于javascript加载），比如#FF0000或者rgb(255, 0, 0)，而这验证了我上面的说法。而在opera中却无法读出style的属性。

把脚本外链把样式外链之后已经是一种通用的作法，甚至在jquery的官方文档中也是这样推荐的

其实对大部分脚本来说，这样的脚本等待外链的机制还是有意义的，比如一些DOM和样式操作需要读取元素的位置，颜色等。这就需要样式先于脚本加载

插播一下，本文同时发表在我的另一个博客 qingbob

加载样式表会阻塞外链脚本的执行

一些Gecko和Webkit引擎版本的浏览器，包括IE8在内，会同时发起多个Http请求来并行下在样式表和脚本。但脚本不会被执行，直到样式被加载完成。在未加载完之前甚至页面也不会被渲染。你可以在frebug或者Chrome的web developer中验证这个想法

但是在opera中样式的加载不会阻塞脚本的执行。有一些类库中模拟dom ready的行为中会把这个“意外”修正为与firefox和chrome类似。

附带一句，在Explorer和Gecko中，样式的加载同样也会阻塞直接写在页面上的脚本的执行（脚本接在样式表中）。在Webkit和Opera中页面上的脚本会被立即执行。

谈第二个问题，各大javascript框架式如何实现自己的dom ready事件的？

我先把他们常用的一些办法告诉大家，再贴出他们的代码，看他们具体是如何操作的。

如果是webkit引擎则轮询document的readyState属性，当值为loaded或者complete时则触发DOMContentLoaded事件

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

对webkit引擎还有一个办法是，因为webkit在525以上的版本中才开始引入了DOMContentLoaded事件，那么你可以对webkit的引擎版本进行判断，如果在525之下就用上面轮询的办法，如果在525之上，则直接注册DOMContentLoaded事件吧。

因为DOMContentLoaded事件最早其实是firefox的私有事件，而后其他的浏览器才开始引入这一事件。所以对火狐浏览器无需多余的处理

最麻烦的IE来了！

方法一： 在页面临时插入一个script元素，并设置defer属性，最后把该脚本加载完成视作DOMContentLoaded事件来触发。

但这样做有一个问题是，如果插入脚本的页面包含iframe的话，会等到iframe加载完才触发，其实这与onload是无异的。

方法二： 通过setTiemout来不断的调用documentElement的doScroll方法，直到调用成功则出触发DOMContentLoaded

var temp = document.createElement('div');
(function(){($try(function(){  
    temp.doScroll('left');
　　return $(temp).inject(document.body).set('html','temp').dispose();}))? domready(): arguments.callee.delay(50);
})();

这样做的原理是

在IE下，DOM的某些方法只有在DOM解析完成后才可以调用，doScroll就是这样一个方法，反过来当能调用doScroll的时候即是DOM解析完成之时，与prototype中的document.write相比，该方案可以解决页面有iframe时失效的问题。

方法三： 首先注册document的onreadystatechange事件，但经测试后该犯方法与window.onload相当

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

接下来具体看一看几大前端框架是如何综合运用这几个方法的。

jquery 1.9.0

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

        // 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 onload, 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 );
};

具体分析如下

首先如果浏览器拥有 .readystate

if( document.readyState ==="complete"){// Handle it asynchronously to allow scripts the opportunity to delay ready
    setTimeout( jQuery.ready );}

我不确定这样的延迟起到了什么样的作用。希望有经验的朋友能指点一下

再者，如果浏览器支持 DOMContentLoaded 的话

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

注意，它在最后还是给load事件注册了事件，以防不测，做为回滚用。

首先它给onreadystatechange和onload事件注册了方法，作为fallback

// Ensure firing before onload, 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 );

继续判断是否为iframe，如果不是的话采用不断的轮询scorll的方法

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

再贴上几段其他框架的代码，大同小异，就不具体分析了

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

最后参考文献

至于几大前端类库的源码直接在github里搜索关键字就行了，这里不再赘述了。

张广森

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
从onload和DOMContentLoaded谈起

来源：http://www.tuicool.com/articles/aae2me这篇文章是对这一两年内几篇dom ready文章的汇总（文章的最后会标注参考文章），因为浏览器进化的关系，可能他们现在的行为与本文所谈到的一些行为不相符。我也并没有一一去验证，所以本文仅供参考，在具体开发中还是要以实践结果为准。当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，
复制链接

扫一扫