javascript - 加载多个 js 文件时 defer 属性应该如何工作？

Question

我有以下示例:

<script >
    console.log('first');
</script>
<script defer>
    console.log('last');
</script>
<script>
    console.log('second');
</script>

就在我的 html 的头部，我希望控制台以 asc 顺序(第一-第二-第三)打印它们，但是，我实际看到的是按照这些脚本放置的顺序(第一 - 最后) - 第二)。

我认为“延迟”属性会加载脚本，但会一直执行到 DOM 完全加载为止。不知道为什么这没有发生。

问候，

Answer 1

defer属性适用于通过 src 加载的脚本带有 URL 的属性，不适用于内联脚本。

您可以在此处查看 defer 和 async 属性的整个 HTML5 规范逻辑:Load and execute order of scripts .

如果你仔细阅读上面帖子中的所有 HTML5 规则，你会发现它们都不符合你的情况，因为没有 src。 <script> 上的属性标签。因此，它遇到了最后一种情况:

Otherwise The user agent must immediately execute the script block, even if other scripts are already executing.

最终结果是 defer属性对内联且没有 src 的脚本标签没有影响属性。

---

如果你想执行中间的<script>在其他两个之后，您将需要更改它的顺序，在适当的时间动态插入它或将代码放入单独的脚本文件中，以便您可以使用 src <script> 上的属性标签。