[转]从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() ...
随机推荐
- 关于HDFS NFS3的配置
1.在core-site.xml中配置 <property> <name>hadoop.proxyuser.root.groups</name> <value ...
- PHP和mysql的长连接
关于 PHP MySQL 长连接.连接池的一些探索 PHP连接MySQL的方式,用的多的是mysql扩展.mysqli扩展.pdo_mysql扩展,是官方提供的.php的运行机制是页面执行完会释放所有 ...
- 向oracle中插入date时，持久层sql怎么写？？？
public class EmpDao { public void addEmp(Emp emp) throws SQLException { QueryRunner runner = new Que ...
- iOS 逆向 - Class-dump 安装和使用方法
1.下载安装包 http://stevenygard.com/projects/class-dump/,这里我下载的是 class-dump-3.5.dmp.然后把下载下来的 dmg 打开,复制文件里 ...
- 【iOS开发-51】案例学习：动画新写法、删除子视图、视图顺序、延迟方法、button多功能使用方法及icon图标和启动页设置
案例效果: (1)导入所需的素材,然后用storyboard把上半截位置和大小相对固定的东西布局起来.当然,这些控件也要定义成对应地IBOutlet和IBAction方便兴许使用它们. 注意:本案例在 ...
- python 基础 8.1 r 正则对象
...
- 五个知识体系之-SQL学习-第二天
创建数据:INSERT INTO userinfo(userid,username,job,level1,companyage) VALUES ('001','xl001','test','P1',' ...
- HDFS relaxes a few POSIX requirements to enable streaming access to file system data
https://hadoop.apache.org/docs/r2.7.2/hadoop-project-dist/hadoop-hdfs/HdfsDesign.html Introduction [ ...
- Python爬虫--初识爬虫
Python爬虫 一.爬虫的本质是什么? 模拟浏览器打开网页,获取网页中我们想要的那部分数据 浏览器打开网页的过程:当你在浏览器中输入地址后,经过DNS服务器找到服务器主机,向服务器发送一个请求,服务 ...
- (图解)Description Resource Path Location Type Java compiler level does not match the version of
Description Resource Path Location Type Java compiler level does not match the version of project 编译 ...