`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属性的标签。它们会阻塞HTML解析和渲染，并在下载后立即执行。这些脚本通常在load事件之前完成加载和执行，因为它们是页面渲染流程的一部分。
异步脚本（Async Scripts）：
带有async属性的标签。这些脚本在后台下载，不阻塞HTML解析。一旦下载完成，它们会立即执行，但其执行顺序不确定，且可能在HTML解析完成之前或之后。关键点：异步脚本的下载是文档加载的一部分，但其执行可能在window.load事件触发之后才完成，或者在其执行过程中load事件已经触发。
延迟脚本（Defer Scripts）：
带有defer属性的标签。这些脚本在后台下载，不阻塞HTML解析。它们会在HTML解析完成后，但在DOMContentLoaded事件触发之前，按照它们在文档中出现的顺序依次执行。这些脚本的执行通常在window.load事件之前完成。
动态生成或模块脚本：
通过JavaScript动态创建的标签，其行为取决于是否显式设置async或defer属性。模块脚本（type=”module”）默认行为类似defer，但在某些情况下其依赖项加载和执行也可能影响最终的完成时机。
load 事件与脚本执行的差异
核心观点在于：window.load事件的触发，标志着浏览器已经获取并处理了所有关键资源，使得页面在视觉上准备就绪。但这并不意味着所有JavaScript的计算任务都已完成。特别是对于async脚本，它们可能在load事件触发后才下载完毕并开始执行，或者即使在load事件触发时已经开始执行，其内部的长时间运行任务也可能尚未结束。
例如，以下场景：
Load Event Test console.log("Inline script executed."); window.addEventListener('load', function() { console.log("Window load event fired."); }); document.addEventListener('DOMContentLoaded', function() { console.log("DOMContentLoaded event fired."); });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.”之前输出。
实践中的注意事项
区分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 执行时序的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529489.html
微信扫一扫 
支付宝扫一扫 
