JQUERY源码解析(架构与依赖模块)
Jquery源码分析之一：概述及jquery对象的构建
// 第六种情况：处理$(elements)
return this.setArray(jQuery.makeArray(selector)); ⑨
}, Biblioteka 现在我们看一下jQuery.fn.init是怎么完成工作的：
init : function(selector, context) {
selector = selector || document;// 确定selector存在
// 第一种情况 Handle $(DOMElement)单个Dom 元素，忽略上下文
3、Dom元素的CSS样式的操作。CSS是控制页面的显示的效果。对CSS的操作那就得包含高度，宽度，display等这些常用的CSS的功能。
4、Ajax的操作。Ajax的功能就是异步从服务器取数据然后进行相关操作。
5、Event的操作。对Event的兼容做了统一的处理。
6、动画(Fx)的操作。可以看作是CSS样式上的扩展。
这些功能细分起来，可以分成以下几个部分：
1、Selector，查找元素。这个查找不但包含基于CSS1~CSS3的CSS Selector功能，还包含其对直接查找或间接查找而扩展的一些功能。
2、Dom元素的属性操作。Dom元素可以看作html的标签，对于属性的操作就是对于标签的属性进行操作。这个属性操作包含增加，修改，删除，取值等。
if (selector.nodeType) { ②
this[0] = selector;
this.length = 1;
return this;
}
if (typeof selector == "string") {//selector为string ③
jQuery源码逐行分析学习01（jQuery的框架结构简化）
jQuery源码逐⾏分析学习01（jQuery的框架结构简化）最近在学习jQuery源码，在此，特别做⼀个分享，把所涉及的内容都记录下来，其中有不妥之处还望⼤家指出，我会及时改正。
望各位⼤神不吝赐教！同时，这也是我的第⼀篇前端技术博客，对博客编写还不是很熟悉，美化⼯作可能不够到位，也希望⼤家多多见谅！⾸先这篇⽂章要给⼤家分享的是：jQuery的框架结构，把框架结构简单化处理此外，2.X相较于1.X版本，去除了对IE6/7/8的⽀持，这也使得其中减少了很多有关于兼容性的代码，便于我们去理解。
下⾯，我们就开始⼀⼀深⼊，剥开jQuery的层层外壳...⾸先是⼀开始的部分，⼀部分注释，⾥⾯包含了⼀些jQuery的信息接下来从第14⾏开始就是jQuery真正的源码了1 (function(window,undefined){2 })();此处是⼀个匿名函数⾃执⾏，它的好处在于，可以把代码块中所有的变量都变成局部变量，这样就不会造成对全局变量的⼀个污染，导致代码冲突。
下⾯举个例⼦：1 (function(){2var a=10;3function $(){4 alert(a);5 }6 })();7 alert(a);//调⽤不到8 $();//调⽤不到但是这样⼀来，造成了外部调⽤不到内部局部变量的情况，所以需要对外提供使⽤内部局部变量和⽅法的接⼝1 (function(){2var a=10;3function $(){4 alert(a);5 }6 window.$=$;//将函数挂载到window上7 })();8 $();//10在jQuery中就是这样实现的，在前⾯(21,94)⾏，jQuery定义了⼀些变量和函数，在8826⾏1//(8826)2 window.jQuery=window.$=jQuery;将jQuery挂载到了window上，这样就使得外部可以访问到jQuery内部的变量和⽅法接下来，在(96,283)⾏1 jQuery.fn=jQuery.prototype={}此处，jQuery.prototype，这表明jQuery是⼀个基于⾯向对象的程序，往后就是在给jQuery对象添加⼀些属性和⽅法。
jQuery2.x源码解析（DOM操作篇）
jQuery2.x源码解析（DOM操作篇）jQuery这个类库最为核⼼重要的功能就是DOM操作了。
DOM是由w3c制定的为和⽂档编写的应⽤程序接⼝，全称叫做，它使得开发者能够修改html和xml的内容和展现⽅式，将⽹页与脚本或编程语⾔连接起来。
但是标准在各个浏览器中的实现是不⼀样的，同时DOM发展也是循序渐进的，不断地增加新的api，因此各个浏览器乃⾄各个版本对于DOM实现的也是不⼀样的。
jQuery这个类库最为核⼼的功能，就是能够将各个主流浏览器的主流版本的DOM处理⽅法统⼀起来，让开发⼈员不必去过分了解各个浏览器对于DOM处理的细节与差异，写⼀次代码就能在各个浏览器中运⾏，并且取得相同的效果。
jQuery这个框架⽬前的流⾏程度在下降，除了新的理论新的框架的兴起外，⼀个主要原因就是各个主流浏览器对于DOM处理的差异正在缩⼩，DOM处理差异⼤的浏览器⽇益趋于被淘汰，所以jQuery对我们⽽⾔仅是⼀个封装了DOM处理的⼯具，存在的意义也⽇趋下降。
但是从预定义的⼏个api就能发现，新增加的api都是在模仿jQuery的，可见jQuery的api是多么经典。
阮⼀峰⽼师曾经有⼀篇化的⽂章，⾥⾯介绍了很多不使⽤jQuery也可以⾼效开发的技巧，这些技巧都是仿照jQuery，并在深⼊了解了DOM 基础上封装起来的。
查看jQuery对于DOM操作的源码，不但会了解到标准的DOM操作⽅法，学习DOM的api的优化，还能学习到关于浏览器兼容的⼀些“⿊魔法”、“⿊科技”。
jQuery封装的DOM⼤致可以分为3⼤类：DOM操作、DOM遍历、DOM事件，篇幅有限，我们先着重看⼀看DOM操作相关的jQuery的源码。
下⾯我们就⼀起看看jQuery的DOM操作相关的部分。
提问：jQuery的DOM操作原理是什么？答：jQuery的核⼼思想是简化DOM的概念，去除出Element外的所有其他Node接⼝的概念，我们只需考虑元素节点Element就可以了。
jquery事件核心源码分析
jquery事件核心源码分析我们从绑定事件开始，一步步往下看：以jquery.1.8.3为例，平时通过jquery绑定事件最常用的是on方法，大概分为下面3种类型：复制代码$(target).on('click',function(){//函数内容})$(target).on('click','.child',function(){//函数内容})$(target).on({click:function(){},mouseover:function(){},mouseout:function(){}})复制代码第一种是我们最常用的写法，通过元素选择器，直接绑定事件；第二种则是利用了事件委托原理，由最初的父元素代理子元素的事件，动态添加的元素绑定事件用第一种方法时无效的；第三种则是同一元素同时绑定多个事件时的简略写法。
我们来看一下on方法的源码，如果我们想封装插件类似on方法调用，可以像on一样来书写，具体可见另一篇文章jQuery插件开发（溢出滚动）复制代码on: function( types, selector, data, fn, /*INTERNAL*/ one ) {var origFn, type;// Types can be a map of types/handlers//上述第三种用法，传入第一个参数为objectif ( typeof types === "object" ) {// ( types-Object, selector, data )if ( typeof selector !== "string" ) { // && selector != null// ( types-Object, data )data = data || selector;selector = undefined;}for ( type in types ) {this.on( type, selector, data, types[ type ], one );}return this;}if ( data == null && fn == null ) {// ( types, fn )fn = selector;data = selector = undefined;} else if ( fn == null ) {if ( typeof selector === "string" ) {// ( types, selector, fn )fn = data;data = undefined;} else {// ( types, data, fn )fn = data;data = selector;selector = undefined;}}if ( fn === false ) {fn = returnFalse;} else if ( !fn ) {return this;}if ( one === 1 ) {origFn = fn;fn = function( event ) {// Can use an empty set, since event contains the infojQuery().off( event );return origFn.apply( this, arguments );};// Use same guid so caller can remove using origFnfn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );}return this.each( function() {jQuery.event.add( this, types, fn, data, selector );});}复制代码我们可以看到，on方法内部的代码类似于初始化，通过对传入参数的分析，来矫正type，fn，data，selector等变量，从而正确的调用jquery.event.add方法。
jQuery1.9.1源码分析
本文由我司收集整编，推荐下载，如有疑问，请与我司联系jQuery1.9.1 源码分析2016/05/19 833 jQuery API 中Data 的基本使用方法介绍jQuery 的数据缓存模块是以一种安全的方式为DOM 元素附加任意类型的数据,避免了javascript 和DOM 之间相互引用而导致的内存泄露问题;当然我们在日常使用中可以给元素设置属性,比如使用attr 等方法,效果是一致的,但是使用该方法会直接暴露数据到源码html 元素上,但是同时也是该缺点获取对于数据安全性不是很高的话,也是一个优点,因为对于开发来讲很直观,便捷,直接可以看到数据的增加或者删除.但是使用attr 也可以列出如下坏处:1. 循环引用;2. 直接暴露数据,数据的安全性需要考虑;3. 增加一堆的自定义标签属性,对浏览器渲染没有很大的意义;4. 设置值或者获取值的时候,需要对html 元素dom 节点操作;基于上面四点的缺点,我们或许可以考虑使用数据缓存Data 属性来操作;下面来介绍下该数据缓存Data;jquery 整体结构源码如下: jQuery.extend({ // 全局缓存对象cache: {}, // 页面中每个jquery 副本的唯一标识expando:”..”, noData: {}, // 是否有关联的数据hasData: function( elem ) {}, // 设置,读取自定义数据data: function( elem, name, data ) {}, // 移除自定义数据removeData: function( elem, name ) {}, // 设置或读取内部数据_data: function( elem, name, data ) {}, // 是否可以设置数据acceptData: function( elem ) {}});jQuery.fn.extend({ // 设置,读取自定义数据,解析html5 属性data- data: function( key, value ){}, // 移除自定义数据removeData: function( key ){}});// 解析html5 属性data-function dataAttr( elem, key, data ){}// 检查数据缓存对象是否为空function isEmptyDataObject( obj ) {}jQuery.extend({ // 清空数据缓存对象cleanData: function(elems, acceptData){}})我们先来看看jquery API 有关Data 的相应的方法介绍; 1. jQuery.data() 存储任意数据到指定的元素或者返回设置的值; 存储任意数据到指定的元素上如下1 1. jQuery.data( element, key, value ) 该方法是:存储任意数据到指定的元素,返回设置的值。
jquery源代码详解
前段时间上班无聊之时，研究了下jquery的源码。
现在记录下自己的成果，分享一下。
下面是我自己琢磨和编写的jquery模型，里面有我所写的注释。
/** my-jquery-1.0*//** 网上也有很多实现的版本，不过这是我在我自己的理解下写的，加上注释，希望可以解释清楚。
*//** 整个jquery包含在一个匿名函数中，专业点叫闭包，就是下面的形式，如(function(window,undefined){}(window))。
* 闭包的定义在这里不太容易讲清楚，我只说下这样说的好处。
* 1.使整个jquery中定义的变量成为局域变量，不会影响全局变量，个人觉得这也是jquery被成为轻量级的原因之一。
* 2.增加jquery运行速度，因为局域变量运行速度高于全局变量。
* 3.就像你看到，传入的window和undefined，可以自定义名字，方便编写。
当然，现在你看到的仍是原来的写法，但是你可以看看jquery的min版本，一定是压缩的。
(function( window, undefined ) {var/*jquery的定义，我们平时用的$和jQuery就是它。
这里可以看出来真正的jQuery的对象是init方法产生的。
*这样做采用了工厂模式，创建jQuery对象时不需要再new一个对象了。
所以你可以发现，我们创建jQuery对象的方式是$(selector)或者是jQuery(selector)*原版的jQuery定义方法多了个上下文参数context，此处我省略了。
*/jQuery = function(selector){return new jQuery.fn.init(selector);},/** 引用数据、对象以及字符串的方法*/core_push = Array.prototype.push,core_slice = Array.prototype.slice,core_indexOf = Array.prototype.indexOf,core_toString = Object.prototype.toString,core_hasOwn = Object.prototype.hasOwnProperty,core_trim = String.prototype.trim;/** jQuery对象的定义，这里去掉了所有的属性，只留下了init()。
jQuery.API源码深入剖析以及应用实现
jQuery.API源码深入剖析以及应用实现(1) －核心函数篇前言Jquery(/)是一个轻量级，快速简洁的Javascript框架，它的容量小巧，简洁和简短的语法，容易记；用户能更方便地处理HTML DOM、Events、实现动画效果，并且提供Ajax的支持。
目前最新版本为jQuery 1.3.1（/file s/jquery-1.3.1.js），这系列文章将对该版本的源码进行阐述。
现在开始本系列的第一篇，Jquery核心函数，内容主要包括：分析1. 在Jquery的应用开发中，我们经常看到这样的代码：那么$(...)里面的参数，Jquery API中是怎样辨认参数是表达式，id，HTML字符串，还是DOM元素呢？现在我们来深入剖析Jquery源码。
2. 这里，我先来做个测试，我将Jquery API简化为这样的代码：从这里我们可以得出，实际上$里面的参数(表达式字符串，ID字符串，HTML字符串，DO M对象)，主要就是在init方法中各自实现它们自己的逻辑。
现在列出init方法的具体实现：3. 现在分析表达式，id，HTML字符串，DOM元素等等各自的实现：1）形如$(document.getElementById("result")) 【jQuery(elements)】DOM元素的实现，通过init方法中的以下代码：selector.nodeType判断当selector为元素节点时，将length置为1，并且赋值于cont ext，实际上context作为init的第二个参数，它意味着它的上下文节点就是selector该点，返回它的$(...)对象。
2）形如$("<div>hello,world</div>") 【jQuery(html,[ownerDocument])】HTML字符串的实现，通过init方法中的以下代码：关键看到这样的一句代码，selector = jQuery.clean( [ match[1] ], context ); 继续查看cl ean都做了些什么：这么长的一串代码实际上最后访问的是一个ret为变量的数组，而数组中的元素变为以D OM元素的对象，而它的innerHTML正好就是刚才的HTML字符串。
js菜鸟进阶-jQuery源码分析（1）-基本架构
var jQuery = function(selector,context){ return new fn.init();
}; jQuery(); jQuery().get();
var fn = { get : function(){} ,name : "cH" ,post : function(){} ,init : function(){ //这是一个内部构造函数 this.age = 18; console.log(this.age); console.log(); }
})(typeof window !== "undefined" ? window: this, function(window, noGlobal) { //回调函数
if ( typeof noGlobal === strundefined ) { window.jQuery = window.$ = jQuery;
是的jQuery就是一个Function对象，那么我们就有几个问题了：
1、在我们印象中jQuery不是一个类库么？ 2、JS中的类不是用构造函数来仿造的吗？ 3、JS构造函数不是都是用new操作符来实例化的么,为什么jQuery不需要使用new来实例化？？？ 要实现无new操作，我们想到可以使用工厂模式。（工厂模式可以参阅 “高级-第六章 面向对象的程序设计” ）接下来我们先看看这个function 的代码：
console.log("get");
}; o.post = function(){
console.log("post"); }; return o; //或者 retrun {
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jQuery设计理念引用百科的介绍：jQuery是继prototype之后又一个优秀的Javascript框架。
它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+,FF1.5+,Safari 2.0+,Opera9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
The Write Less,Do More（写更少，做更多），无疑就是jQuery的核心理念，简洁的API、优雅的链式、强大的查询与便捷的操作。
从而把jQuery打造成前端世界的一把利剑，所向披靡！简洁的API:优雅的链式:强大的选择器：便捷的操作：为什么要做jQuery源码解析？虽然jQuery的文档很完善，潜意识降低了前端开发的入门的门槛，要实现一个动画随手拈来，只要简单的调用一个animate方法传递几个执行的参数即可，但如果要我们自己实现一个定制的动画呢？我们要考虑的问题太多太多了，浏览器兼容、各种属性的获取、逻辑流程、性能等等，这些才是前端开发的基础核心。
如果我们只知道使用jQuery，而不知道其原理，那就是“知其然,而不知其所以然”，说了这么多，那就赶快跟着慕课网进入“高大上”之旅吧，深入来探究jQuery的内部架构！jQuery整体架构任何程序代码不是一开始就复杂的，成功也不是一躇而蹴的，早期jQuery的作者John Resig 在2005年提议改进Prototype的“Behaviour”库时，只是想让其使用更简单才发布新的jQuery框架。
起初John Resig估计也没料想jQuery会如此的火热。
我们可以看到从发布的第一个1. 0开始到目前最新的2.1.1其代码膨胀到了9000多行，它兼容CSS3，还兼容各种浏览器，jQu ery使用户能更方便地处理DOM、事件、实现动画效果，并且方便地为网站提供AJAX交互。
1、最新jQuery2.1.1版本的结构：代码请查看右侧代码编辑器（1-24行）2、jQuery的模块依赖网：（单击图片可放大）jQuery一共13个模块，从2.1版开始jQuery支持通过AMD模块划分，jQuery在最开始发布的1.0版本是很简单的，只有CSS选择符、事件处理和AJAX交互3大块。
其发展过程中，有几次重要的变革：每一次大的改进都引入了一些新的机制、新的特性，通过这些新的机制就造就了如今jQuery库，一共13个模块，模块不是单一的，比如jQuery动画，都会依赖异步队列、动画队列、回调队列与数据缓存模块等。
jQuery抽出了所有可复用的特性，分离出单一模块，通过组合的用法，不管在设计思路与实现手法上jQuery都是非常高明的。
五大块：jQuery按我的理解分为五大块，选择器、DOM操作、事件、AJAX与动画，那么为什么有13个模块？因为jQuery的设计中最喜欢的做的一件事，就是抽出共同的特性使之“模块化”，当然也是更贴近S.O.L.I.D五大原则的“单一职责SRP”了，遵守单一职责的好处是可以让我们很容易地来维护这个对象，比如，当一个对象封装了很多职责的时候，一旦一个职责需要修改，势必会影响该对象的其它职责代码。
通过解耦可以让每个职责更加有弹性地变化。
我们来看看jQuery文档针对业务层的Ajax的处理提供了一系列的门面接口：底层接口：快捷方法：jQuery接口的设计原理业务逻辑是复杂多变的，jQuery的高层API数量非常多，而且也非常的细致，这样做可以更友好的便于开发者的操作，不需要必须在一个接口上重载太多的动作。
我们在深入内部看看Ajax 的高层方法其实都是统一调用了一个静态的jQuery.ajax方法，代码见右侧代码编辑器（27-43行）。
在jQuery.ajax的内部实现是非常复杂的，首先ajax要考虑异步的处理与回调的统一性，所以就引入了异步队列模块（Deferred）与回调模块（Callbacks）,所以要把这些模块方法在ajax方法内部再次封装成、构建出一个新的jQXHR对象，针对参数的默认处理，数据传输的格式化等等。
立即调用表达式任何库与框架设计的第一个要点就是解决命名空间与变量污染的问题。
jQuery就是利用了Java Script函数作用域的特性，采用立即调用表达式包裹了自身的方法来解决这个问题。
jQuery的立即调用函数表达式的写法有三种：写法1：可以看出上面的代码中嵌套了2个函数，而且把一个函数作为参数传递到另一个函数中并且执行，这种方法有点复杂，我们简化一下写法：写法2：上面的代码效果和方法1是等同的，但是这个factory有点变成了简单的工厂方法模式，需要自己调用，不像是一个单例的jQuery类，所以我们需要改成“自执行”，而不是另外调用。
写法3：从上面的代码可看出，自动初始化这个函数，让其只构建一次。
详细说一下这种写法的优势：1、window和undefined都是为了减少变量查找所经过的scope作用域。
当window通过传递给闭包内部之后，在闭包内部使用它的时候，可以把它当成一个局部变量，显然比原先在wind ow scope下查找的时候要快一些。
2、undefined也是同样的道理，其实这个undefined并不是JavaScript数据类型的undefined，而是一个普普通通的变量名。
只是因为没给它传递值，它的值就是undefined，undefined并不是JavaScript的保留字。
有童鞋留言到，为什么要传递undefined？我们看一个IE8存在这个问题，当然，大部分浏览器都是不能被修改的如果函数调用不传递，参数默认就是undefinedjQuery为什么要创建这样的一个外层包裹，其原理又是如何？这里要区分2个概念一个是匿名函数，一个是自执行。
顾名思义，匿名函数，就是没有函数名的函数，也就是不存在外部引用。
但是是否像下面代码实现呢：上面这种写法是错了，声明了它但是又不给名字又没有使用，所以在语法上错误的，那么怎么去执行一个匿名的函数呢？要调用一个函数，我们必须要有方法定位它、引用它。
所以，我们要取一个名字：jQuery使用()将匿名函数括起来，然后后面再加一对小括号（包含参数列表），那么这小括号能把我们的表达式组合分块，并且每一块（也就是每一对小括号），都有一个返回值。
这个返回值实际上也就是小括号中表达式的返回值。
所以，当我们用一对小括号把匿名函数括起来的时候，实际上小括号返回的，就是一个匿名函数的Function对象。
因此，小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。
所以如果在这个引用变量后面再加上参数列表，就会实现普通函数的调用形式。
最后，我们回到写法1看看jQuery利用写法3的写法，然后把整个函数作为参数传递给另外一个函数，主要是为了判断jQuery在不同平台的下的加载逻辑，主流的库一般都有对AMD和CommonJS的支持代码，看看jQuery的代码：总结：全局变量是魔鬼,匿名函数可以有效的保证在页面上写入JavaScript，而不会造成全局变量的污染，通过小括号，让其加载的时候立即初始化，这样就形成了一个单例模式的效果从而只会执行一次。
jQuery的类数组对象结构为什么是类数组对象呢？很多人迷惑的jQuery为什么能像数组一样操作，通过对象get方法或者直接通过下标0索引就能转成DOM对象。
首先我们看jQuery的入口都是统一的$,通过传递参数的不同，实现了9种方法的重载：9种用法整体来说可以分三大块：选择器、dom的处理、dom加载。
换句话说jQuery就是为了获取DOM、操作DOM而存在的！所以为了更方便这些操作，让节点与实例对象通过一个桥梁给关联起来，jQuery内部就采用了一种叫“类数组对象”的方式作为存储结构，所以我们即可以像对象一样处理jQuery操作，也能像数组一样可以使用push、pop、sh ift、unshift、sort、each、map等类数组的方法操作jQuery对象了。
jQuery对象可用数组下标索引是什么原理？通过$(".Class")构建的对象结构如下所示：整个结构很明了，通过对象键值对的关系保存着属性，原型保存着方法。
我们来简单的模拟一个这样的数据结构：（请查看右侧代码编辑器）以上是模拟jQuery的对象结构，通过aQuery方法抽象出了对象创建的具体过程，这也是软件工程领域中的广为人知的设计模式-工厂方法。
jQuery的无new构建原理函数aQuery()内部首先保证了必须是通过new操作符构建。
这样就能保证当前构建的是一个带有this的实例对象，既然是对象我们可以把所有的属性与方法作为对象的key与value的方式给映射到this上，所以如上结构就可以模拟出jQuery的这样的操作了，即可通过索引取值，也可以链式方法取值，但是这样的结构是有很大的缺陷的，每次调用ajQuery方法等于是创建了一个新的实例，那么类似get方法就要在每一个实例上重新创建一遍，性能就大打折扣，所以j Query在结构上的优化不仅仅只是我们看到的，除了实现类数组结构、方法的原型共享，而且还实现方法的静态与实例的共存，这是我们之后将会重点分析的。
jQuery中ready与load事件jQuery有3种针对文档加载的方法一个是ready一个是load，这两个到底有什么区别呢？ready与load谁先执行：大家在面试的过程中，经常会被问到一个问题：ready与load那一个先执行，那一个后执行？答案是ready先执行，load后执行。
DOM文档加载的步骤：要想理解为什么ready先执行，load后执行就要先了解下DOM文档加载的步骤：从上面的描述中大家应该已经理解了吧，ready在第（4）步完成之后就执行了，但是load要在第（6）步完成之后才执行。
结论：ready与load的区别就在于资源文件的加载，ready构建了基本的DOM结构，所以对于代码来说应该越快加载越好。
在一个高速浏览的时代，没人愿意等待答案。
假如一个网站页面加载超过4秒，不好意思，你1/4的用户将面临着流失，所以对于框架来说用户体验是至关重要的，我们应该越早处理DOM越好，我们不需要等到图片资源都加载后才去处理框架的加载，图片资源过多load事件就会迟迟不会触发。