window.addEventListener('load')与页面底部<script>加载速度对比及方案优选

嘿，这个问题问到点子上了！咱们从页面加载速度、执行时机两个核心维度来拆解这两种方案的差异，帮你判断哪种更适合你的场景：

先搞懂两种方案的执行时机 #

• 放在</body>闭合标签正上方的脚本：
  当浏览器解析到这个<script>标签时，整个<body>的DOM元素已经全部被解析并构建完成了（毕竟它就在body的最后）。这时候脚本会立即执行，完全不会等待页面上的图片、字体、外部样式表这些资源加载完毕。

• 用addEventListener("load")加载的脚本：
  load事件是整个页面的所有资源（包括图片、视频、字体、子框架等）都加载完成后才会触发的。也就是说，你的脚本要等到页面上所有东西都准备好才会运行，执行时机比前者晚很多。

从加载速度角度看，改用load事件是否合理？ #

这得看你的脚本逻辑需求：

• 如果你的脚本只需要操作DOM（比如你示例里的修改body.innerHTML），完全不依赖图片、外部资源的加载状态，那用load事件完全没必要——反而会让脚本执行延迟，用户要等更久才能看到页面变化，感知上的加载速度会变慢。
• 只有当你的脚本逻辑必须依赖所有资源加载完成时（比如需要获取图片的实际渲染尺寸、依赖某个第三方资源的加载状态），用load事件才是合理的，但这种场景其实并不常见。

哪种方案更优？ #

优先选：放在</body>闭合标签正上方 #

优势非常明显：

• 执行时机早，DOM就绪后立刻运行，页面内容更新或交互逻辑启动更快，对用户来说加载体验更好；
• 代码简洁，不需要额外的事件监听包裹，减少不必要的代码层级；
• 几乎不会有DOM未就绪的问题（毕竟已经到body最后了），稳定性足够。

仅在特殊场景选：addEventListener("load") #

只有当你明确需要等待所有资源加载完成时再执行脚本，才考虑这种方案。比如你要做一个图片懒加载的初始化，需要知道所有图片的尺寸，这时候load事件能确保图片都加载完毕。但多数情况下，我们甚至会优先用DOMContentLoaded事件（DOM构建完成就触发，不等资源加载），它的执行时机比load早很多，更兼顾DOM就绪和加载速度。

内容的提问来源于stack exchange，提问作者Tomasz