async 和defer 属性都是script标签上 用于异步加载的，他们的主要区别在于脚本的执行时机。
async：脚本异步加载，并且在脚本下载完成后立即执行。这意味着脚本可能在文档DOM未加载完成之前执行。
defer：脚本异步加载，并且在文档完全解析之后执行。因此脚本中如果有获取DOM的操作的话一定使用defer才保证使用DOM的时候已经它加载出来了。
给script标签加上 type="module" 啥作用？
异步加载脚本，并且仅在需要时执行。
在HTML中，<script> 标签用于嵌入或引用JavaScript代码。type 属性在HTML4中是用来指定脚本语言的，但在现代HTML5中，默认脚本语言是JavaScript，因此type="module"并不是一个标准的或不标准的属性。通常情况下，不加type属性或将其设置为text/javascript（这是HTML4标准中要求的）已经足够让浏览器知道这里嵌入的是JavaScript代码。
不过，现代JavaScript有一个模块系统，允许你将代码分割成不同的模块，并且只在需要时加载它们。为了与这个模块系统兼容，可以使用一个特定的type值，即module。然而，这通常是在JavaScript的<script>标签的type属性中设置的，而不是HTML标签。
如果你在HTML中使用type="module"，一些现代浏览器可能会用它来提示该脚本应该按照ES modules的规范来处理。这意味着脚本可能会异步加载，且仅在需要时执行，这有助于提高页面加载性能。然而，这并不是一个强制的规范，而且不是所有浏览器都一定会这样处理。
在HTML中不加type属性和加上type="module"的主要区别可能在于：
- 不加
type属性时，浏览器默认将脚本作为传统脚本处理，可能会立即执行（这取决于defer或async属性）。 - 加上
type="module"**时，浏览器可能会按照模块加载的方式处理脚本，这意味着它可能会异步加载并且不会立即执行，而是等到该模块被需要时再执行。
**需要注意的是，由于type="module"**属性不是HTML5标准的一部分，因此不是所有浏览器都支持这一点，而且即使支持，它们的处理方式也可能不一致。
**为了确保兼容性和明确性，最好的做法是使用<script type="module">标签，并在JavaScript代码中使用import语句来明确表明你正在使用模块系统。这样，浏览器就会按照它们对模块的支持来处理这些脚本。
vite 在vue3项目中 index.html 中引入 main.js 的标签上 加上了 type="module" , 其目的还有一个就是可以把这个文件加载当成一个web请求，在请求这个main.js 文件的时候可以在web服务器中使用中间件koa对文件做拦截处理，比如将ts转成js让浏览器执行。
