window.onload与JS执行顺序详解

前往下载Windows工具

有志者，事竟成！如果你在学习文章，那么本文《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属性的