在前端开发过程中，我们经常需要在页面加载完成后对 DOM 进行操作。而在不同的情况下，我们可以选择使用 window.onload 或者 $（document）。ready() 来实现这个目标。本文将深入探讨它们之间的区别和使用场景。
1. window.onload
window.onload 是一个原生的 JavaScript 事件，当网页中所有资源都加载完成后才会触发。因此，如果我们使用 window.onload 来执行一些 DOM 操作，我们可以确保这些操作是在所有资源都加载完毕后进行的。
例如，下面这段代码会在页面加载完成后弹出 "Hello World"：
-- -------------------- ---- ------- --------- ----- ------ ------ --------------------- ------------ -------- ----------------------- --------------- - ---------- - --------------- -------- ---- ---------- ------- ------ ----- ---- --- ------- -------
但是需要注意的是，window.onload 只能绑定一个函数，如果有多个函数需要执行，它们将被覆盖。另外，在某些情况下，比如图片较多或者服务器响应速度慢的时候，window.onload 的执行可能会比较缓慢，导致用户等待时间过长。
2. $(document).ready()
$(document).ready() 是 jQuery 提供的一个方法，它会在 DOM 加载完成后立即执行，而不需要等待所有资源都加载完成。这意味着我们可以在 DOM 加载完成后立即对其进行操作，而无需等待其他资源（如图片）的加载。
例如，下面这段代码使用 $（document）。ready() 来隐藏一个 id 为 "myDiv" 的元素：
-- -------------------- ---- ------- --------- ----- ------ ------ --------------------------- ------------ -------- ---------------------------------------------------------------------------- -------- ----------------------- ------------------------------ - ---------------------- ----- ---------- ------- ------ ----- ---------------- ----------- ------- -------
需要注意的是，$(document).ready() 可以绑定多个函数，它们将按照添加的顺序依次执行。此外，$(document).ready() 的执行速度比 window.onload 快，因为它只需要等待 DOM 加载完成即可。
3. 区别和应用场景
从上面的介绍中可以看出，window.onload 和 $（document）。ready() 有一些区别。那么我们该如何选择哪一个来使用呢？
如果我们需要执行的操作需要等待页面中所有资源都加载完成后才能执行，那么就应该使用 window.onload；如果我们只需要在 DOM 加载完成后立即执行某些操作，那么使用 $（document）。ready() 就可以了。
此外，$(document).ready() 通常比 window.onload 更常用，因为它不需要等待所有资源加载完成就可以执行，而且多个函数也可以同时绑定。因此，在我们日常的前端开发中，建议使用 $（document）。ready() 来操作 DOM 元素。
4. 示例代码
最后，我们提供一些示例代码来演示如何使用 window.onload 和 $（document）。ready()：
使用 window.onload
-- -------------------- ---- ------- --------- ----- ------ ------ --------------------- ------------ -------- ----------------------- --------------- - ---------- - ------ ----- - --------------------------------- ------------------ - ------ ------- ---- ---------- ------- ------ ----- ----------------- ------- -------
使用 $(document).ready()
<!DOCTYPE html> <html> <head > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/7309) ，转载请注明来源 [https://www.javascriptcn.com/post/7309](https://www.javascriptcn.com/post/7309)