最近两天不忙的时候再回过来研究一下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的更多相关文章

  1. jquery源码阅读(1)

    每天坚持阅读一定量的的jquery代码,积少成多!加油加油! jquery-2.2.1的9161~9194行 1 if ( typeof define === "function" ...

  2. JQuery源码阅读记录

    新建html文件,在浏览器中打开文件,在控制台输入consoole.log(window);新建html文件,引入JQuery后在浏览器中打开,在控制台同样输入consoole.log(window) ...

  3. jquery源码阅读笔记一

    1. jquery无new的构造函数. 无new的构造函数是怎么实现的.比如我们一般这么用jQuery. $(".test").text(); 但是我们一般是这么写的. var t ...

  4. jQuery源码分析系列

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...

  5. [转]jQuery源码分析系列

    文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...

  6. jQuery源码分析系列(转载来源Aaron.)

    声明:非本文原创文章,转载来源原文链接Aaron. 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAa ...

  7. jQuery源码分析系列——来自Aaron

    jQuery源码分析系列——来自Aaron 转载地址:http://www.cnblogs.com/aaronjs/p/3279314.html 版本截止到2013.8.24 jQuery官方发布最新 ...

  8. jquery源码分析学习地址

    http://www.ccvita.com/121.htmljQuery工作原理解析以及源代码示例http://www.cnblogs.com/haogj/archive/2010/04/19/171 ...

  9. jquery 源码分析学习地址

    http://www.ccvita.com/121.htmljQuery工作原理解析以及源代码示例http://www.cnblogs.com/haogj/archive/2010/04/19/171 ...

随机推荐

  1. Android activity和service的生命周期对比

    1Activity生命周期 七个方法 1. void onCreate(Bundle savedInstanceState) 当Activity被第首次加载时执行.我们新启动一个程序的时候其主窗体的o ...

  2. ubuntu 非常简单的方式安装多个perl版本

    参考http://stackoverflow.com/questions/22934080/how-to-downgrade-to-perl-5-10-1 Perlbrew will allow yo ...

  3. python 后台爆破工具

    sys:使用sys模块获得脚本的参数 queue模块,创建一个“队列”对象 time 模块     Python time time() 返回当前时间的时间戳(1970纪元后经过的浮点秒数). fin ...

  4. js 字符串转换成数字的三种方法

    在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形 ...

  5. oracle执行cmd的实现方法

    网络上找到的在sqlplus中执行cmd的一些命令,主要有四种方法,这边都做了一下测试,这里做一下记录: 测试环境:window2003+Oracle 11.2.0.1.0 第一种方法: 最简单的执行 ...

  6. vs安装失败,发生严重错误,错误号:Error 0x80070643

    发生这个的原因很大的可能是vs安装的目录不是系统默认目录,改一下就好了. C:\Program File(x86) 不要看网上那些没有的,都TM骗人的. 不要问我是怎么知道的,你只要知道我的电脑让我重 ...

  7. (转) Awesome Deep Learning

    Awesome Deep Learning  Table of Contents Free Online Books Courses Videos and Lectures Papers Tutori ...

  8. iOS NSTimer使用详解 开启、关闭、移除

    定时器定时器详解ios定时器关闭定时器NSTimer 一,要使用一个定时器首先要定义一个定时器: @property (strong, nonatomic) NSTimer *myTimer;//定时 ...

  9. inotify +rsync进行实时同步

    1.安装rpm -ivh http://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpmyum -y install ino ...

  10. LeetCode----Array

    Remove Duplicates from Sorted Array 思路:两个指针,头指针在0,尾指针从1开始寻找,找到第一个不等于头指针值的数,覆盖掉头指针后面那个数,然后尾指针往后移. pub ...