有志者，事竟成！如果你在学习文章，那么本文《window.load 事件与 JS 执行顺序解析》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

`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脚本的加载和执行行为：

1. 同步脚本（Sync Scripts）：

   • 通常指没有async或defer属性的

     Hello World

     

     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.”之前输出。

     实践中的注意事项

     1. 区分DOMContentLoaded与load：

        • DOMContentLoaded在HTML文档完全加载和解析完毕后触发，不等待样式表、图片等外部资源。适用于需要立即操作DOM的脚本。
        • window.load在所有资源加载完毕后触发。适用于需要确保所有视觉元素都已就位后执行的脚本，例如图片轮播初始化、第三方插件初始化等。

     2. 异步脚本的管理：

        • 如果某个操作依赖于某个异步脚本的执行结果，不应仅仅依赖window.load事件。
        • 可以考虑在该异步脚本内部触发一个自定义事件，或者使用Promise/回调机制来确保依赖关系。
        • 对于关键的、需要确保执行顺序的脚本，避免使用async，或使用defer。

     3. 长任务与用户体验：

        • 无论脚本是同步还是异步，长时间运行的JavaScript任务都可能阻塞主线程，导致页面无响应。
        • 即使window.load事件已经触发，如果后续的脚本执行耗时过长，仍会影响用户体验。考虑使用requestAnimationFrame、setTimeout或Web Workers来处理耗时操作。

     总结

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

     本篇关于《window.onload与JS执行顺序详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！