这篇文章是对这一两年内几篇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.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事件注册了事件,以防不测,做为回滚用。
- IE
首先它给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(); } })(); }
再贴上几段其他框架的代码,大同小异,就不具体分析了
(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(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);
最后参考文献
- onLoad and onDOMContentLoaded
- DOMContentLoaded
- Stylesheet loads block script execution
- 主流框架中DOMContentLoaded事件的实现
至于几大前端类库的源码直接在github里搜索关键字就行了,这里不再赘述了。