document.ready vs window.onload

问题

jQuery 中的 $(document).ready() 与 window.onload 有什么区别？

解答

window 与 document 的区别

window 对象表示浏览器中打开的窗口，可以省略调用，如 window.console.log() 等价于 console.log()。

document 对象是 window 对象的一部分，表示浏览器的 HTML 文档，如 document.body 等价于 window.document.body。

$(document).ready()

当浏览器加载并解析完整个 HTML 文档，DOM 树建立完成后执行。

原生 JavaScript 写法：

document.addEventListener('DOMContentLoaded', function() {
  alert("ready");
});

jQuery 写法：

$(document).ready(function() {
  alert("ready");
});

// 简写
$(function() {
  alert("ready");
});

$(window).load()

当页面中所有元素（包括图片、CSS 文件等所有关联文件）完全加载到浏览器后执行。

原生 JavaScript 写法：

window.onload = function() {
  alert("onload");
};

jQuery 写法：

$(window).load(function() {
  alert("onload");
});

执行顺序

DOM 文档加载步骤：

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

编写多个的区别

window.onload 只能编写一个，多个会被覆盖：

// 只会执行第二个
window.onload = function() {
  alert("text1");
};
window.onload = function() {
  alert("text2");
};

$(document).ready() 可以编写多个，都会执行：

$(document).ready(function() {
  alert("Hello World");
});
$(document).ready(function() {
  alert("Hello again");
});

关键点

• $(document).ready() 在 DOM 树构建完成后执行，window.onload 需等待所有资源（包括图片）加载完成
• $(document).ready() 可以编写多个且都会执行，window.onload 多个会被覆盖
• $(document).ready() 可简写为 $(function(){})，window.onload 无简写
• 为 DOM 元素添加事件用 $(document).ready() 效率更高，但需要等待图片加载完成的场景必须用 window.onload