从jQuery源码阅读看 dom load
最近两天不忙的时候再回过来研究一下jquery的源码，看到$(document).ready()时，深入的研究了一下dom的加载问题。
我们都知道，window.onload可以解决我们的js执行时机问题。有了它，可以把代码放在页面的任何位置。但是我们也知道，window.onload 要在html、css、js、img全部加载完后才会触发，而这样会影响页面的访问速度。因此，jquery通过封装$(function)做到了DOM加载完毕时就对js内容进行触发。
那jquery做到的原理是什么呢？我从原理上简单的做一下分析。
在IE9+、chorme、firefox等现代浏览器中，有个原生的js事件：DOMContentLoaded 当这个事件触发时，就说明DOM已经加载完毕，可以进行下面的js操作了
document.addEventListener('DOMContentLoaded',function(){alert(123);},false);
但是IE8以下是不支持这个事件的，所以IE用的是onreadystatechange事件
document.onreadystatechange = function(){
if(document.readyState == 'complete'){
alert('Dom已经加载完毕')
}
}
但是，非标准浏览器不会这么容易让我们好过。
首先，当document.readyState == 'complete'时，图片等文件已经加载完成了，虽然会在window.onload 之前执行，但是对交互效果来说还是触发的太晚了。有些站点的图片要下载下来是很慢很慢滴！
我在这里随便举个例子：
<body>
<div>12345555555555555555555555555</div>
<img src="http://b.hiphotos.baidu.com/zhidao/pic/item/c8177f3e6709c93da9f2dafa9b3df8dcd10054bf.jpg" alt=""> <script> alert(111)
window.onload = function(){
alert(456)
}
document.onreadystatechange = function(){
if(document.readyState == 'complete'){
alert(123);
//complete是指所有资源包括图片js等文件全部加载完成后才会触发。
//readyState == 'complete'确实会在onload前触发，但是还是触发的太晚。
}
} </script>
</body>
大家看，在IE8下，当页面执行时，首先弹出111，这毫无疑问。然后呢？对不起，是图片在页面中完全显示出来。然后再弹出123,最后弹出456.
再次，alert(123)执行时机也不确定，因为同一段代码，再IE7中，或者更高层的IE9种，有时图片还没有加载下来，alert(123)执行了。所以单纯使用这个readyState不太靠谱
那么jquery中是如何做的呢？jquery中用了一个IE才能识别的属性：document.documentElement.doScroll
这是个什么东东？好像从来没有见过？ 这就是学习源码的好处，可以看看大师级人物是如何做处理的，并且我们可以从中取其精华，好不惬意！
兼容不支持该事件的浏览器
在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态，因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。
doScroll通过时readyState可能为interactive, 也可能为complete. 但是一定会在DOM结构稳定后, 图片加载完毕前执行.
// The DOM ready check for Internet Explorer
function doScrollCheck() {
if ( jQuery.isReady ) {
return;
} try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch(e) {
setTimeout( doScrollCheck, 1 );
return;
} // and execute any waiting functions
jQuery.ready();
}
这是jquery的源码，通过异常捕获，如果DOM没有加载完，则会一直catch这个setTimeout ,直到dom加载完，执行以下try里面的doScroll
具体doScroll的详细含义大家可以从网上查查，我这里就不列举了
MSDN 关于 JScript 的一个方法有段不起眼的话，当页面 DOM 未加载完成时，调用 doScroll 方法时，会产生异常。那么我们反过来用，如果不异常，那么就是页面DOM加载完毕了！
当然，doScroll的运用前提是页面中没有iframe,如果有iframe,那么只能是图片之类的全加载完毕才执行了。
从jQuery源码阅读看 dom load的更多相关文章
- jquery源码阅读(1)
每天坚持阅读一定量的的jquery代码,积少成多!加油加油! jquery-2.2.1的9161~9194行 1 if ( typeof define === "function" ...
- JQuery源码阅读记录
新建html文件,在浏览器中打开文件,在控制台输入consoole.log(window);新建html文件,引入JQuery后在浏览器中打开,在控制台同样输入consoole.log(window) ...
- jquery源码阅读笔记一
1. jquery无new的构造函数. 无new的构造函数是怎么实现的.比如我们一般这么用jQuery. $(".test").text(); 但是我们一般是这么写的. var t ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
- [转]jQuery源码分析系列
文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...
- jQuery源码分析系列(转载来源Aaron.)
声明:非本文原创文章,转载来源原文链接Aaron. 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAa ...
- jQuery源码分析系列——来自Aaron
jQuery源码分析系列——来自Aaron 转载地址:http://www.cnblogs.com/aaronjs/p/3279314.html 版本截止到2013.8.24 jQuery官方发布最新 ...
- jquery源码分析学习地址
http://www.ccvita.com/121.htmljQuery工作原理解析以及源代码示例http://www.cnblogs.com/haogj/archive/2010/04/19/171 ...
- jquery 源码分析学习地址
http://www.ccvita.com/121.htmljQuery工作原理解析以及源代码示例http://www.cnblogs.com/haogj/archive/2010/04/19/171 ...
随机推荐
- Meta http-equiv的属性详解 来自wanglehui
Meta http-equiv 语法标签格式:<meta http-equiv="参数" content="参数值"> 1."过期时间&q ...
- 测试加载jquery
Hello world! <h1 id="main-heading">Hello world!</h1> <p><img onclick= ...
- jquery+ajax跨域请求webservice
最近几天在学习webservice...在学习的时候便想到用ajax的方式去请求webservice.. 一直在测试..如果这个被请求的webservice和自己使用的是同一个端口号.则不用考虑那aj ...
- JS 设计模式
1.单例模式:产生一个类的唯一实例 例如:我们在页面中添加遮罩层,每次只能有一个遮罩层存在,因此为单例模式. 在创建遮罩层之前判断是否已经存在,若没有存在,则创建. 这里使用闭包,将是mask变量封装 ...
- 转：仿QQ长按弹出功能菜单
android app普遍常用的弹出上下文菜单是列表式的.QQ列表,在上方弹出冒泡效果菜单,如图 这里讲解一下如何写出这个效果: 图片资源:两张图片,可以拼接成如上效果. 首先,我们需要写布局文件: ...
- Java JDBC链接数据库
1.注册驱动Class.forname("com.mysql.jdbc.Driver");//这是连接mysql数据库的驱动2.获取数据库连接java.sql.Connectio ...
- 【Django】Django web项目部署（Nginx+uwsgi）
一.安装uwsgi 通过pip安装uwsgi. pip install uwsgi 测试uwsgi,创建test.py文件: def application(env, start_response): ...
- SQL语句小总结
无论是面试过程中,还是未来工作中,SQL都是一定会考到和用到的.所以,在此对之前看过的一些SQL知识点进行一下总结和记录,算是起到一个笔记本的作用.没有深入学习过SQL的和对SQL印象不太深的朋友可以 ...
- Quartz2D之绘制一个简单的机器猫
学习iOS有一段时间了,在博客园也默默的潜水了两个月,见识了很多大神,收获不少. 今天整理笔记,发现忘记的不少,我感觉需要及时的整理一下了,同时也把做的小东西贴上来和大家分享一下. 最近学习了Quar ...
- fopen中r+和w+的区别
r+: Open for reading and writing. The stream is positioned at the beginning of the file. w+:Open ...