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

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

相关推荐

  • 使用ES模块的两种方式

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

    JavaScript经验 2024年1月16日
    0320
  • innerHTML、outerHTML、textContent、innerText、outerText实例属性的区别

    1.innerHTML和outerHTML区别 类 实例属性 区别 Element innerHTML 目标元素标签之间的 HTML 代码,不包括目标元素标签本身。 Element outerHTML 目标元素标签之间的 HTML 代码,包括目标元素标签本身。 2.textContent和innerText区别 类 实…

    JavaScript经验 2023年10月15日
    0670
  • Node.js风格的CommonJS模块

    CommonJS 模块用于在服务器环境中使用,而 Node.js 使用了 CommonJS 模块的轻微修改版本,本文介绍 Node.js 风格的 CommonJS 模块。 模块就是以 .js 为扩展名的 JavaScript 文件。 普通脚本文件内的顶级的成员对其它脚本文件来说是公开(public)的全局上下文,而模块…

    JavaScript经验 2023年3月7日
    02670

发表回复

登录后才能评论