为什么要等待window.onload？答案

【问题标题】：Why wait for window.onload?为什么要等待window.onload？
【发布时间】：2014-09-01 12:33:31
【问题描述】：

在javascript中什么情况下我们需要等待window onload事件才能运行代码？

还有哪些有用的事情可以不用等待呢？

【问题讨论】：

您的意思是相对于DOMReady，还是一般意义上的？
如果您的脚本在 html 之前，那么您必须等待它加载（否则您将尝试访问不存在的内容）。如果它是在标记之后，那么您可能需要只等待异步上下文（例如图像），因为它们将参与布局。最后，DOM 准备就绪并且仅可用......当它被解析时（但当它准备好时，您可以在 onload 之前使用它）。
@FrédéricHamidi - 我的意思是一般

标签： javascript window onload

【解决方案1】：

在javascript中什么情况下我们需要等待window onload事件才能运行代码？

如果您想访问 #document 中的节点
如果要获取页面的高度或宽度等值
如果您想在向 #document 追加新内容时避免竞争条件
基本上，所有DOM 相关 都与特定页面

还有哪些有用的事情可以不用等待呢？

计算动作
声明函数、初始化变量
测试功能支持，包括 polyfills
基本上，所有非 DOM 相关，或 DOM 与特定浏览器相关但与页面无关

【讨论】：

【解决方案2】：

当您的代码需要访问/修改 DOM 和所有资产（图像、字体等）时，您需要在运行代码之前使用 window onload 事件。你也可以使用 jQuery 的（或等效的）&(document).ready()。它比窗口加载更早触发，因此用户会感觉网站加载速度更快。不同之处在于，在文档就绪时，只有 DOM 树已就绪，但资产可能尚未加载。在窗口 onload 上，所有内容都已加载。

在文档就绪事件之前，您可能还需要做一些事情。例如，如果您需要为用户创建某种唯一 id 并设置 cookie，则无需等待 DOM。或者如果你想基于 cookie 做一些事情（前提是它不接触 DOM）。或者您需要从 API 加载一些外部数据（但在尝试显示该数据之前您需要等待 DOM）。一般来说，任何不接触 DOM 的东西都应该没问题。

【讨论】：

【解决方案3】：

来自相关的 SO 帖子：window.onload vs. body.onload vs. document.onready

window.onload 等待所有资源完成下载，例如图像和脚本。

还有一个“DOM 就绪”事件允许更快地访问 dom，因为它只会等到您可以通过 API 访问 DOM。

【讨论】：

【解决方案4】：

如果您的代码需要执行其他文件（如库、框架或您自己的公开全局内容的文件），您应该始终等待浏览器完成下载所有内容。

所以在大多数情况下，您应该这样做。你可以找到不需要这个的边缘案例，但它非常罕见，而且在人类对时间的感知中不会花费你太多。

【讨论】：