在我的 polyfill 和其他脚本上设置 defer 会保证它们按顺序加载吗？

Question

我正在使用 polyfill.io 来填充 Promise 并为老客户获取。在their website 上，他们建议使用脚本加载器或其回调来确保在运行现代代码之前脚本已完全加载：

我们建议使用 async 和 defer 属性 从 polyfill 服务加载的标签，但在 非阻塞方式意味着你不能确定你自己的 代码将在 polyfill 加载完成之前或之后执行。

在您尝试运行自己的之前确保 polyfill 存在 代码，您可以将 onload 处理程序附加到 https://cdn.polyfill.io script 标签，使用更复杂的脚本加载器或简单地使用我们的 当 polyfills 被调用时，回调参数来评估全局回调 已加载：

但是，不应该在两个脚本上设置defer 已经保证它们是异步加载的，但仍然按照它们在文档中出现的顺序（除非浏览器不支持延迟）？

<script src="https://cdn.polyfill.io/v2/polyfill.min.js" defer></script>
<script src="modernscript.js" defer></script>

Answer 1

根据MDN documentationdefer属性只定义了一个页面加载时间点，脚本加载将发生。

从您引用的文档中可以看出：

在您尝试运行自己的之前确保 polyfill 存在 代码，您可以将 onload 处理程序附加到 https://cdn.polyfill.io 脚本标签

由于（如 cmets 对此答案所指出的那样）无法清楚地看到是否将执行 defer 脚本（1、2）并考虑到可能的浏览器实现差异 - 可能不是依靠这种行为的最佳主意。

所以更好的方法是：

1. 使用一些脚本加载器（例如RequireJS）
2. 将建议的onload 处理程序添加到第一个<script> 标记并创建动态<script> 标记以在此处理程序中加载您的代码
3. 将您的代码与 Promise polyfill 捆绑在一起（手动或使用像 webpack 这样的捆绑器）并作为单个包加载。

更新：正如@PeterHerdenborg 在comment 中指出的那样——MDN 文档现在明确指出：

具有 defer 属性的脚本将按照它们在文档中出现的顺序执行。