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

Question

我有以下例子：

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

就在我的 html 的头部，我希望控制台以 asc 顺序（第一-第二-第三）打印它们，但是，我实际看到的内容遵循这些脚本的顺序放在哪里（第一 - 最后 - 第二）。

我以为 'defer' 属性会加载脚本，但会一直执行到 DOM 完全加载。不知道为什么这没有发生。

此致，

Answer 1

您可能需要使用不同的解决方案

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Since this feature hasn't yet been implemented by all other major browsers, authors should not assume that the script’s execution will actually be deferred. The defer attribute shouldn't be used on scripts that don't have the src attribute. Since Gecko 1.9.2, the defer attribute is ignored on scripts that don't have the src attribute. However, in Gecko 1.9.1 even inline scripts are deferred if the defer attribute is set.

我建议使用像 SystemJS 这样的模块加载器来确保同步加载模块。 https://github.com/systemjs/systemjs

System.import('./script1.js').then(function(m) {
    System.import('./script2.js').then(function(n) {
        console.log(m, n);
    });
});

Answer 2

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

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

如果你把上面所有的HTML5规则都看一遍post，你会发现其中none符合你的情况，因为没有src <script> 标签上的属性。因此，它遇到了最后一种情况：

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

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

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

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

How defer attribute should work when loading several js files?

javascript

loading

deferred