理解 window.load 事件与 JavaScript 执行时序-js教程-PHP中文网

理解 window.load 事件与 JavaScript 执行时序

花韻仙語

发布： 2025-10-14 12:11:24

原创

463人浏览过

理解 window.load 事件与 JavaScript 执行时序

`window.load` 事件在整个文档（包括所有资源如图片、样式表）加载完成后触发，但并不保证所有“非延迟javascript”（尤其是异步脚本）在此时已完全执行完毕。html living standard 定义 `load` 事件为“文档加载完毕”，这不等同于所有脚本的执行流程已终止。开发者需注意异步脚本的执行时机，以避免潜在的竞态条件或预期外的行为。

window.load 事件的定义与时机

window.load 事件是Web开发中一个重要的生命周期事件，它标志着浏览器已经完成了整个文档及其所有依赖资源（如图片、CSS文件、字体等）的加载。根据WHATWG维护的HTML Living Standard规范，load 事件的触发时机被明确定义为“当文档加载完毕时”。这意味着，当浏览器完成了对HTML结构、样式、图片以及其他嵌入资源的下载和解析后，window.load 事件便会触发。

然而，一个常见的误解是，load 事件触发时，页面上的所有JavaScript代码（包括内联、外部、异步或动态生成的脚本）都已完成执行。实际上，规范的定义关注的是“文档加载”的状态，而非“JavaScript执行”的状态。

“非延迟JavaScript”的执行特性

在讨论load事件时，我们需要理解不同类型的JavaScript脚本的加载和执行行为：

同步脚本（Sync Scripts）：

立即学习“Java免费学习笔记（深入）”；
- 通常指没有async或defer属性的<script>标签。
- 它们会阻塞HTML解析和渲染，并在下载后立即执行。
- 这些脚本通常在load事件之前完成加载和执行，因为它们是页面渲染流程的一部分。
异步脚本（Async Scripts）：
- 带有async属性的<script>标签。
- 这些脚本在后台下载，不阻塞HTML解析。
- 一旦下载完成，它们会立即执行，但其执行顺序不确定，且可能在HTML解析完成之前或之后。
- 关键点：异步脚本的下载是文档加载的一部分，但其执行可能在window.load事件触发之后才完成，或者在其执行过程中load事件已经触发。
延迟脚本（Defer Scripts）：
- 带有defer属性的<script>标签。
- 这些脚本在后台下载，不阻塞HTML解析。
- 它们会在HTML解析完成后，但在DOMContentLoaded事件触发之前，按照它们在文档中出现的顺序依次执行。
- 这些脚本的执行通常在window.load事件之前完成。
动态生成或模块脚本：
- 通过JavaScript动态创建的<script>标签，其行为取决于是否显式设置async或defer属性。
- 模块脚本（type="module"）默认行为类似defer，但在某些情况下其依赖项加载和执行也可能影响最终的完成时机。

load 事件与脚本执行的差异

核心观点在于：window.load事件的触发，标志着浏览器已经获取并处理了所有关键资源，使得页面在视觉上准备就绪。但这并不意味着所有JavaScript的计算任务都已完成。特别是对于async脚本，它们可能在load事件触发后才下载完毕并开始执行，或者即使在load事件触发时已经开始执行，其内部的长时间运行任务也可能尚未结束。

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

查看详情

例如，以下场景：

<!DOCTYPE html>
<html>
<head>
    <title>Load Event Test</title>
    <script async src="async-script.js"></script>
    <script>
        console.log("Inline script executed.");
        window.addEventListener('load', function() {
            console.log("Window load event fired.");
        });
        document.addEventListener('DOMContentLoaded', function() {
            console.log("DOMContentLoaded event fired.");
        });
    </script>
</head>
<body>
    <h1>Hello World</h1>
    <img src="large-image.jpg" alt="Large Image">
</body>
</html>

登录后复制

async-script.js的内容：

console.log("Async script started.");
// 模拟一个耗时操作
let i = 0;
while (i < 1000000000) {
    i++;
}
console.log("Async script finished.");

登录后复制

在这个例子中，async-script.js的下载与HTML解析并行，其执行可能与window.load事件的触发时间重叠，甚至在load事件之后才完成。如果async-script.js中的计算量很大，那么“Window load event fired.”可能会在“Async script finished.”之前输出。

实践中的注意事项

区分DOMContentLoaded与load：
- DOMContentLoaded在HTML文档完全加载和解析完毕后触发，不等待样式表、图片等外部资源。适用于需要立即操作DOM的脚本。
- window.load在所有资源加载完毕后触发。适用于需要确保所有视觉元素都已就位后执行的脚本，例如图片轮播初始化、第三方插件初始化等。
异步脚本的管理：
- 如果某个操作依赖于某个异步脚本的执行结果，不应仅仅依赖window.load事件。
- 可以考虑在该异步脚本内部触发一个自定义事件，或者使用Promise/回调机制来确保依赖关系。
- 对于关键的、需要确保执行顺序的脚本，避免使用async，或使用defer。
长任务与用户体验：
- 无论脚本是同步还是异步，长时间运行的JavaScript任务都可能阻塞主线程，导致页面无响应。
- 即使window.load事件已经触发，如果后续的脚本执行耗时过长，仍会影响用户体验。考虑使用requestAnimationFrame、setTimeout或Web Workers来处理耗时操作。

总结

window.load事件的触发意味着文档及其所有资源已加载完毕，页面在视觉上已准备就绪。然而，这并不保证所有“非延迟JavaScript”的执行流程已完全终止。特别是对于带有async属性的脚本，其执行可能与load事件的触发时间重叠或在其之后完成。开发者在设计页面加载逻辑时，应充分理解不同脚本的加载和执行模型，并根据具体需求选择合适的事件监听器和脚本加载策略，以确保应用程序的正确行为和良好的用户体验。

以上就是理解 window.load 事件与 JavaScript 执行时序的详细内容，更多请关注php中文网其它相关文章！