Question

我有以下示例：

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

在我的html的头部，我希望控制台以asc顺序打印它们（第一至第二 - 第三），然而，我实际看到的是遵循这些脚本放置的顺序（第一个 - 最后一个） - 第二）。

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

问候，

Answer 1

function change_subscription_product_string( $subscription_string, $product, $include ) { if( $include['sign_up_fee'] ){ $subscription_string = str_replace('sign-up fee', 'Hardware cost', $subscription_string); } return $subscription_string; } add_filter( 'woocommerce_subscriptions_product_price_string', 'change_subscription_product_string', 10, 3 );属性适用于通过带有URL的defer属性加载的脚本，而不适用于内联脚本。

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

如果您浏览上述帖子中的所有HTML5规则，您会发现它们都不符合您的情况，因为src标记上没有src属性。因此，它击中了最后的情况：

否则用户代理必须立即执行脚本块，即使其他脚本已在执行。

最终结果是<script>属性对内联的脚本标记没有影响，并且没有defer属性。

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

Answer 2

您可能需要使用其他解决方案

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

由于此功能尚未被所有其他主要浏览器实现，因此作者不应假设脚本的执行实际上将被延迟。延迟属性不应该用在没有src属性的脚本上。从Gecko 1.9.2开始，在没有src属性的脚本上会忽略defer属性。但是，在Gecko 1.9.1中，如果设置了defer属性，甚至内联脚本也会延迟。

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

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

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

2 个答案: