本文深入探讨了 JavaScript 中 window.load 事件的触发时机。该事件在文档完成加载时触发，但其与非延迟 JavaScript 代码执行完成之间的关系并不明确。本文将详细解析 window.load 事件的触发机制，并阐明其与 JavaScript 执行顺序之间的微妙联系，帮助开发者更好地理解和利用该事件。
window.load 事件详解
window.load 事件是 Web 开发中一个重要的事件，它表明整个文档，包括所有依赖资源（如图像、样式表和脚本），都已经完成加载。理解 window.load 事件的触发时机对于确保网页功能的正确执行至关重要。
window.load 事件的触发条件
根据 HTML Living Standard 的定义，window.load 事件在文档完成加载时触发。这意味着浏览器已经完成了以下任务：
立即学习“Java免费学习笔记（深入）”；
- 解析 HTML 结构。
- 加载并渲染 CSS 样式。
- 加载并执行 JavaScript 脚本。
- 加载所有图像、视频和其他外部资源。
window.load 事件与 JavaScript 执行顺序
关键问题在于，window.load 事件是否在所有“非延迟 JavaScript”代码执行完毕后才触发？这里的“非延迟 JavaScript”指的是所有通过 HTML 页面加载的 JavaScript 代码，包括内联脚本、外部脚本、异步脚本、动态生成的脚本和模块，但不包括：
- onload() 事件处理程序中的代码。
- 等待用户输入的其他处理程序中的代码。
规范指出，load 事件在“文档完成加载”时触发，并没有明确说明该事件是在所有非延迟 JavaScript 代码执行完毕 之后 触发。这意味着浏览器可能会在某些 JavaScript 代码仍在执行时触发 window.load 事件。
示例代码
以下是一个简单的示例，说明了 window.load 事件的用法：
<!DOCTYPE html>
<html>
<head>
<title>window.load 事件示例</title>
<script>
window.addEventListener('load', function() {
console.log('window.load 事件已触发！');
// 在此处执行需要在页面完全加载后执行的代码
});
</script>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<img src="image.jpg" alt="示例图片">
</body>
</html>在这个例子中，当页面完全加载（包括 image.jpg）后，控制台将输出 "window.load 事件已触发！"。
注意事项
- 异步脚本： 使用 async 属性加载的脚本会并行下载和执行，它们可能会在 window.load 事件触发之前或之后完成执行，这取决于脚本的大小和网络速度。
- 延迟脚本： 使用 defer 属性加载的脚本会按照它们在 HTML 中出现的顺序执行，但在 HTML 解析完成后、DOMContentLoaded 事件触发之前执行。window.load 事件会在 defer 脚本执行完毕后触发。
- 资源加载顺序： 浏览器会尽可能并行加载资源，但某些资源（如 CSS）可能会阻塞后续资源的加载，直到它们完成加载和解析。
总结
window.load 事件是一个重要的事件，用于指示文档及其所有依赖资源已完成加载。虽然规范没有明确规定该事件必须在所有非延迟 JavaScript 代码执行完毕后才触发，但在实际应用中，我们通常可以认为 window.load 事件在大部分 JavaScript 代码执行完毕后触发。开发者应注意异步脚本和延迟脚本的执行顺序，并根据实际需求选择合适的事件处理方式。在 window.load 事件处理程序中执行需要在页面完全加载后才能执行的代码，例如初始化 UI 组件、发送分析数据等。
