何时不使用 defer 属性

Question

我以为我知道如何在从我的 html 页面引用外部脚本时使用 'defer' 属性。 我什至认为我没有理由不使用它。 但是在发生了一些意想不到的事情之后，我开始研究（即使在这里），我想我不能 100% 确定每次使用脚本标签时使用它的安全性。

是否存在不应使用 defer 的已知用例列表？

Answer 1

defer所做的唯一一件事就是在 DOM 完成解析后，但在DOMContentReady事件被触发之前运行您的脚本。

所以：如果你的代码不依赖于 DOM（直接或间接地通过访问只能在 DOM 完成后确定的document属性），则没有理由defer . 例如：一个实用程序库添加了一个新的命名空间ComplexNumbers ，具有ComplexNumber对象类型和相关实用程序函数用于执行复数数学，没有理由等待 DOM：它不需要被推迟。 自定义 websocket 库也是如此：即使您自己使用该库需要执行 DOM 更新，它也不依赖于 DOM 并且不需要defer 。

但是对于那些试图访问任何有关的DOM任何代码：您需要使用defer 。 是的：您几乎应该defer任何作为初始页面加载一部分加载的脚本，如果您的工作正确，这些脚本在尝试接触它们的 DOM 的各个部分时不会相互干扰需要合作。

事实上，你应该同时拥有defer * 和 * async ，以免阻塞页面线程。 例外情况是，如果您正在加载type="module"脚本，在这种情况下，您无法选择延迟：默认情况下是延迟的。 但它仍然需要async 。