Script 标签 type=module, defer, async 的作用

在现代Web开发中，<script>标签的属性对于控制JavaScript的加载和执行顺序至关重要。type=module, defer, 和 async 属性可以帮助我们更好地管理脚本的加载流程，从而提高页面的加载速度和用户体验。本文将深入探讨这些属性的工作原理、应用场景以及它们之间的区别，并通过详细的代码示例来展示如何在实践中使用它们。

1. 基本概念与作用

1.1 type=module

• 定义：type=module 属性告诉浏览器该 <script> 标签中的脚本应该按照ES模块规范来解析和执行。
• 用途：允许在浏览器环境中使用 ES6 模块，即导入（import）和导出（export）语句。

1.2 defer

• 定义：defer 属性告诉浏览器在解析完整个文档之后再执行脚本，但保证脚本按顺序执行。
• 用途：确保脚本按顺序执行，同时不会阻塞页面渲染。

1.3 async

• 定义：async 属性告诉浏览器立即下载脚本并在下载完成后立即执行，不保证脚本的执行顺序。
• 用途：异步加载脚本，加快页面加载速度。

2. 基础用法

2.1 type=module

示例一：使用 ES6 模块

<script type="module">
  import {
      greet } from './greeting.js';

  greet();
</script>

2.2 defer

示例二：使用 defer 属性

<script src="./example.js" defer></script>

2.3 async

示例三：使用 async 属性

<script src="./example.js" async></script>

3. 完整示例

3.1 type=module 示例

<!-- 示例四：使用 ES6 模块 -->
<script type="module">
  import {
      greeting } from './greeting.js'</