window.onload()函数和jQuery中的document.ready()有什么区别（面试题）

**Window.onload() 函数与 jQuery 中的 document.ready() 的区别**

在网页开发中，了解如何正确地加载 JavaScript代码至关重要。两个常见的函数是 `window.onload()` 和 jQuery 中的 `document.ready()`。虽然它们看似相似，但实际上有着本质的区别。

**1. window.onload() 函数**

`window.onload()` 是一个 DOM事件，用于在窗口加载完成后执行指定的 JavaScript代码。这个函数会等待所有资源（包括图片、脚本和样式表）全部下载并解析完毕后才执行。

javascript// 使用 window.onload() 函数window.onload = function() {
 console.log('Window loaded!');
};

**2. jQuery 中的 document.ready()**

jQuery 提供了一个 `document.ready()` 方法，用于在文档加载完成后执行 JavaScript代码。这个方法会等待所有资源（包括图片、脚本和样式表）全部下载并解析完毕后才执行。

javascript// 使用 jQuery 的 document.ready() 方法$(document).ready(function() {
 console.log('Document ready!');
});

**区别**

虽然 `window.onload()` 和 jQuery 中的 `document.ready()` 都用于等待文档加载完成，但它们有几个关键性的区别：

* **事件类型**: `window.onload()` 是一个 DOM事件，而 jQuery 的 `document.ready()` 是一个方法。
* **兼容性**: `window.onload()` 是标准 JavaScript，适用于所有浏览器；而 jQuery 的 `document.ready()` 只适用于支持 jQuery 的浏览器。
* **执行顺序**: `window.onload()` 会等待所有资源（包括图片、脚本和样式表）全部下载并解析完毕后才执行；而 jQuery 的 `document.ready()` 会在文档结构加载完成后立即执行，不会等待所有资源下载完毕。

**示例**

以下是一个示例，演示了 `window.onload()` 和 jQuery 中的 `document.ready()` 在实际应用中的区别：

javascript// 使用 window.onload() 函数window.onload = function() {
 console.log('Window loaded!');
 // 等待2 秒后执行 setTimeout(function() {
 console.log('Window fully loaded!');
 },2000);
};

// 使用 jQuery 的 document.ready() 方法$(document).ready(function() {
 console.log('Document ready!');
 // 等待2 秒后执行 setTimeout(function() {
 console.log('Document fully loaded!');
 },2000);
});

在这个示例中，`window.onload()` 会等待所有资源下载完毕后才执行 `console.log('Window fully loaded!')`；而 jQuery 的 `document.ready()` 会立即执行 `console.log('Document ready!')`，然后再等待2 秒后执行 `console.log('Document fully loaded!')`。

**结论**

在网页开发中，了解 `window.onload()` 和 jQuery 中的 `document.ready()` 的区别至关重要。虽然它们看似相似，但实际上有着本质的区别。`window.onload()` 是一个标准 JavaScript事件，适用于所有浏览器；而 jQuery 的 `document.ready()` 只适用于支持 jQuery 的浏览器。选择合适的函数可以帮助你更好地管理 JavaScript代码和网页资源的加载顺序。