jQuery源码学习 之 ready与load事件 ---- day4

jQuery中ready与load事件

1. jQuery中有3种针对文档加载的方法

$(document).ready(function() {
    // ...code...
});
// document ready简写
$(function() {
    // ...code...
});
$(document).load(function() {
    // ...code...
});

2. ready和load的区别

二者的区别是：ready先于load执行。这里我们要理解DOM文档的加载顺序：

（1）解析HTML结构；
（2）加载外部脚本和样式表文件；
（3）解析并执行脚本代码；
（4）构造HTML DOM模型； // ready
（5）加载图片等外部文件；
（6）页面加载完毕。// load

从上面的步骤，我们应该已经理解了，ready在第（4）步完成之后就执行了，但是，load要在第（6）步完成之后才执行。

3. 结论

ready与load工区别就在于资源文件的加载，ready构建了基本的DOM结构，所以对于代码来说应该越快加载越好。在一个高速浏览的时代，没人愿意等待答案。假如一个网站页面加载超过4s，那你将面临1/4用户的流失，所以对于框架来说，用户体验是至关重要的，我们应该越早处理DOM越好，不需要等到图片资源都加载后才去处理框架的加载，图片资源过多load事件就会迟迟不会触发。

4. jQuery中的ready实现

jQuery.ready.promise = function(obj) {
    if(!readyList) {
        readyList = jQuery.Deferred();
        if(document.readyState === 'complete') {
            setTimeout(jQuery.ready);
        } else {
            document.addEventListener("DOMContentLoaded", completed, false);
            window.addEventListener("load", completed, false);
        }
    }
    return readyList.promise(obj);
};

jQuery的ready是通过promise给包装过的，这也是jQuery擅长的手法，统一了回调系统。可见，jQuery兼容的具体策略：针对高级的浏览器，当前很乐意使用DOMContentLoaded事件，省时省力。

IE的处理方法：