window.onload与$(document).ready()的区别分析-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要等待文档加载完成后再执行 JavaScript 代码。这时候就会用到两个比较常见的函数：window.onload 和 $（document）.ready()。虽然它们都能够实现等待文档加载完成后执行脚本的功能，但是它们之间还是有一些区别的。

window.onload

window.onload 是一个在整个页面（包括图片、样式表等所有资源）加载完成后才被触发的事件。也就是说，当所有资源都已经下载完毕后，才会执行 window.onload 中的函数。因此，如果页面中有大量的图片或其他资源，那么 window.onload 就会比较慢，导致用户需要等待更长时间才能看到页面内容。

window.onload = function() {
  // 在此处编写需要等待页面加载完成后执行的代码
}

需要注意的是，如果同时定义了多个 window.onload 函数，只有最后一个会被执行。

$(document).ready()

$(document).ready() 是 jQuery 提供的一个函数，用来处理 DOM 树构建完成后就可以执行的代码。它的优点是不需要等待整个页面的资源都加载完成，所以相对来说比 window.onload 更快一些。另外，由于 jQuery 已经处理了浏览器兼容性问题，所以 $(document).ready() 在不同浏览器中的表现是一致的。

$(document).ready(function() {
  // 在此处编写需要等待 DOM 树构建完成后执行的代码
});

也可以使用 $().ready() 或者 $().onload() 来代替 $(document).ready()。

区别分析

执行时间：window.onload 会在所有资源都加载完成后才被触发，而 $(document).ready() 则会在 DOM 树构建完成后就被触发。因此，$(document).ready() 会比 window.onload 快一些。
可靠性：由于某些不可预知的原因，有时候页面的某些资源可能无法被正确地加载，这时候 window.onload 就无法被触发。而 $(document).ready() 只关注 DOM 树的构建，所以即使某些资源无法加载，也不会影响它的触发。
多次绑定：window.onload 只能被绑定一个函数，如果同时定义了多个 window.onload 函数，只有最后一个会被执行。而 $(document).ready() 可以被绑定多次，每次绑定的函数都会按照顺序被执行。
jQuery 依赖：$(document).ready() 是 jQuery 提供的函数，需要引入 jQuery 库才能使用。而 window.onload 是原生 JavaScript 支持的事件，不需要引入任何库。

指导意义

在实际开发中，我们应该尽可能地使用 $(document).ready() 来等待 DOM 树构建完成后执行代码，这样可以提高页面加载速度，并且更加可靠。但是如果某些特殊情况下需要确保所有资源都已经加载完成后再执行某些代码，那么就需要使用 window.onload。

最后，需要注意的是，$(document).ready() 和 window.onload 都只会在页面首次加载时触发一次，如果需要在页面内容动态更新后再次执行相关代码，需要使用事件委托等技术手段来实现。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>示例页面</title>
  <script src="https://code.jquery

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/3102) ，转载请注明来源
[https://www.javascriptcn.com/post/3102](https://www.javascriptcn.com/post/3102)