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

$(document).ready(function() {    // ...代码...})//document ready 简写$(function() {    // ...代码...})$(document).load(function() {    // ...代码...})

一个是ready一个是load，这两个到底有什么区别呢？

ready与load谁先执行：

大家在面试的过程中，经常会被问到一个问题：ready与load那一个先执行，那一个后执行？答案是ready先执行，load后执行。

DOM文档加载的步骤：

要想理解为什么ready先执行，load后执行就要先了解下DOM文档加载的步骤：

1、解析HTML结构

2、加载外部脚本和样式表文件爱呢

3、解析并执行脚本代码

4、构造HTML DOM模型  //ready步骤

5、加载图片等外部文件

6、页面加载完毕  //load步骤

页面显示的加载效果如下:

观察脚本加载的顺序 脚本解析一 脚本解析三 脚本解析二 DOMContentLoaded回调 load事件回调

从上面的描述中大家应该已经理解了吧，ready在第（4）步完成之后就执行了，但是load要在第（6）步完成之后才执行。

结论：

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