JavaScript window.onload 事件 vs jQuery ready 函数
在前端开发中，我们经常需要在页面加载完成后执行一些 JavaScript 操作。JavaScript 原生提供了 window.onload 事件来实现这一目的，而 jQuery 提供了 ready 函数来达到相同的效果。虽然它们都可以在页面加载完成后执行代码，但它们之间有一些重要的区别。本文将对这两者进行详细比较，并提供示例代码帮助读者理解。
1. JavaScript window.onload 事件
window.onload 事件是 JavaScript 原生提供的事件，当整个页面（包括其所有内嵌的资源如图片、样式表、脚本等）加载完成后触发。使用该事件可以确保在所有页面元素都已经加载完成后再执行 JavaScript 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript window.onload</title>
</head>
<body>
<script>
window.onload = function() {
// 页面完全加载后执行的代码
console.log('Window loaded');
};
</script>
</body>
</html>
在上面的示例中，window.onload 事件触发时，控制台会输出 'Window loaded'。
2. jQuery ready 函数
jQuery 提供了一个名为 ready 的函数，用于在 DOM 结构加载完成后执行代码。与 window.onload 不同，ready 函数不需要等待页面上的所有资源加载完成，只需要等待 DOM 结构加载完成即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery ready</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
// DOM 结构加载完成后执行的代码
console.log('Document ready');
});
</script>
</body>
</html>
在上面的示例中，当 DOM 结构加载完成后，控制台会输出 'Document ready'。
3. 区别分析
触发时机：
window.onload事件在页面及其所有资源加载完成后触发，包括图片、样式表、脚本等。ready函数在 DOM 结构加载完成后即可触发，不需要等待页面上的所有资源加载完成。
性能：
- 由于
window.onload需要等待页面上的所有资源加载完成才触发，因此会导致页面加载速度变慢。 ready函数只需要等待 DOM 结构加载完成即可触发，不会阻塞其他资源的加载，因此性能更好。
- 由于
用法：
- 使用
window.onload事件时，只能绑定一个处理函数，多个处理函数需要通过函数内部逻辑实现。 - 使用
ready函数时，可以绑定多个处理函数，它们会按照绑定的顺序依次执行。
- 使用
4. 示例代码
下面是一个同时使用 window.onload 和 ready 的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript window.onload vs jQuery ready</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
window.onload = function() {
console.log('Window loaded');
};
$(document).ready(function() {
console.log('Document ready');
});
</script>
</body>
</html>
在这个示例中，当页面加载完成后，会依次输出 'Window loaded' 和 'Document ready'，这说明 window.onload 和 ready 函数都被成功触发了。
5. 总结
虽然 window.onload 事件和 jQuery 的 ready 函数都可以在页面加载完成后执行代码，但它们在触发时机、性能和用法上有所区别。在实际开发中，根据具体需求选择合适的方法来确保代码的正确执行。
![[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635463/20241109/c55917b4a28342b78633c9da58d86e30.png?x-oss-process=image/resize,h_160,m_lfit)