type=”module”、defer、async属性的区别

<script> 标签无 type="module" 属性时,deferasync 属性都只可以被用在 <script> 元素的外部方式,如果被用在 <script> 元素的内部方式,则会被忽略。

<script> 标签有 type="module" 属性时, deferasync 属性都可以被用在 <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

(1)
huoxiaoqiang的头像huoxiaoqiang
上一篇 2024年1月16日
下一篇 2024年2月15日

相关推荐

  • 使用ES模块的两种方式

    无论是内部方式还是外部方式,带有 type=”module” 属性的 <script> 标签会告诉浏览器相关代码应该作为模块执行,而不是作为普通的脚本执行。 无论是内部方式还是外部方式,一个 HTML 页面有多少个 type=”module” 属性的 <script> 标签没有限制。 无论是内部…

    JavaScript经验 2024年1月16日
    02830
  • JavaScript事件处理程序(又称为事件监听器)详解

    1.概念 负责处理或响应事件而调用的函数称为 事件处理程序(又称为 事件监听器)。 概念 示例 事件类型(又称为 事件名称) “click” 事件目标 <button> 事件处理程序属性名 onclick 事件处理程序(又称为 事件监听器) myFunction() 事件对象 event 2.HTML事件处…

    JavaScript经验 2023年5月11日
    03180
  • npm exec和npx的区别

    从以上两者的使用方式上,我们很容易可以看出,npm exec 命令后面的内容与 npx 命令后面的内容相同,npx 就是 npm exec 的简写,但在解决包方面还是有一些区别的,如下所示: npm exec 可以使用双连字符(–)标志(flag)来抑制作为选项的包的解决,以达到与 npx 一样的功能。 npx

    JavaScript经验 2021年7月24日
    01.4K0

发表回复

登录后才能评论