[转]从onload和DOMContentLoaded谈起
这篇文章是对这一两年内几篇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里搜索关键字就行了，这里不再赘述了。
来源：
http://www.cnblogs.com/hh54188/archive/2013/03/01/2939426.html
[转]从onload和DOMContentLoaded谈起的更多相关文章
- onload、DOMContentLoaded与性能问题
onload.DOMContentLoaded与性能问题 onload事件 DomContentLoaded 1.onload事件 onload事件一般在所有的文档内容加载完成后触发,如果网页中图 ...
- window.onload、DOMContentLoaded和$(document).ready()
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- Window.onLoad 和 DOMContentLoaded事件的先后顺序
相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西. 一般情况下,DOMContentLoade ...
- onload和DOMContentLoaded
执行时间 onload必须等到页面内包括图片的所有元素加载完毕后才能执行. DOMContentLoaded是DOM结构绘制完毕后就执行,不必等到加载完毕. 编写个数不同 onload不能同时编写多个 ...
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别
$().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...
- window.onload和DOMContentLoaded的区别
一.何时触发这两个事件? 1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完 ...
- onload;readystatechange;DOMContentLoaded事件
当文档的 readyState 属性发生改变时,会触发 readystatechange 事件. onload 事件会在页面或图像加载完成后立即发生 当纯HTML被完全加载以及解析时,DOMConte ...
- window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕
http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...
- 父子页面之间元素相互操作(iframe子页面)
js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...
随机推荐
- android开发系列之使用xml自定义控件
在android开发的过程中,有的时候面对多个Activity里面一些相同的布局,我们需要写多次相同的代码,同时这种方法给我们的项目维护也带来了很大不便.那么有没有一种可行的办法能够将Activity ...
- 显存不够----ResourceExhaustedError (see above for traceback): OOM when allocating tensor with shape[4096]
ResourceExhaustedError (see above for traceback): OOM when allocating tensor with shape[4096] 类似问题 h ...
- Android API Guides---Supporting Tablets and Handsets
在Android平台上的各种屏幕尺寸的执行和系统调整大小正常应用程序的用户界面.以适应每一个人. 通常情况下,你须要做的是设计你的UI是灵活的,并通过提供替代资源(如又一次定位的一些看法观点或替代尺寸 ...
- 如何编译文件（gcc + nasm）
[0]README 编译文件(nasm + gcc),特别是编译目标文件的依赖文件:本文旨在回顾 gcc 和 nams 编译器的编译命令,以及如果有多个依赖文件该如何编译: [1]编译文件 1.1)编 ...
- Unity3D研究院编辑器之重写Hierarchy的右键菜单
Hierarchy视图中选择一个游戏对象以后通过右键可以打开一个unity默认菜单,一般情况下都可以满足我们,但是我想真对某些特殊的游戏对象而展开特殊的菜单.如下图所示,比如这样: 代码: using ...
- Git --更改远程分支名
git更新远程分支名字 git checkout old_branch git branch -m old_branch new_branch git push --delete origin old ...
- python 基础 4.2 高阶函数上
一.高阶函数 把函数当做参数传递的一种函数 1>map()函数 map函数是python内置的一个高阶函数,它接受一个函数f和一个list,并把list元素以此传递给函数f,然后返回一个函数 ...
- python 基础 1.3 使用pycharm给python传递参数及pycharm调试模式
一.通过pycharm 给python传递函数 1. 在pycharm终端中写入要获取的参数,进行获取 1>启动pycharm 中Terminal(终端) 窗口 点击pycharm左下角的图标, ...
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间> 本文围绕着实现EasyDSS高性能流 ...
- Vue知识随记
数据绑定内支持JavaScript表达式:string字符串反转用.隔开 js: msg:'Hello ' html: {{ msg.split('').reverse().join('.') }} ...