当 <script> 标签无 type="module" 属性时，defer 和 async 属性都只可以被用在 <script> 元素的外部方式，如果被用在 <script> 元素的内部方式，则会被忽略。
当 <script> 标签有 type="module" 属性时， defer 和 async 属性都可以被用在 <script> 元素的外部方式和内部方式。
1.type="module"属性
加载和执行脚本：参考 defer 属性。
注意：虽然 type="module" 与 defer 属性在加载和执行脚本方面相同，但区别在于 type="module" 作用于模块，而 defer 作用于普通脚本。
<script type="module" src="./file.js"></script>
<script type="module">
//模块代码
</script>2.defer属性
加载(下载)脚本：异步并行。
执行脚本：无论是普通脚本还是模块，</html> 元素之后，触发 DOMContentLoaded 事件之前，按声明时的顺序执行。不过在实际当中，推迟执行的脚本不一定总会在 DOMContentLoaded 事件之前执行或按声明时的顺序执行，因此最好只包含一个这样的脚本。defer 属性对模块没有影响，模块本身就隐式地包含 defer 属性。
<script src="./file.js" defer></script><script type="module" src="./file.js" defer></script>
<script type="module" defer>
//模块代码
</script>3.async属性
加载(下载)脚本：异步并行。
执行脚本：无论是普通脚本还是模块，</html> 元素之前或之后，触发 load 事件之前，触发 DOMContentLoaded 事件之前或之后，不按声明时的顺序执行，而是按先加载(下载)下来的先执行。
<script src="./file.js" async></script><script type="module" src="./file.js" async></script>
<script type="module" async>
//模块代码
</script>原创文章，作者：huoxiaoqiang，如若转载，请注明出处：https://www.huoxiaoqiang.com/experience/javascriptexp/34014.html
微信扫一扫 
支付宝扫一扫