1.正常模式
<script src="index.js"></script>
正常模式下js会阻塞dom渲染, 浏览器必须等待js加载执行完后才能做其他事情;
2.async模式
<script async src="index.js"></script>
async 模式下, js加载是异步的, 不会阻塞DOM的渲染,async加载是没有顺序的,当他加载结束会立即执行;
使用场景: 若js资源与DOM元素没有依赖关系, 也不会产生其他资源所需要的数据, 可以使用async模式, 比如埋点统计功能;
3.defer模式
<script defer src="index.js"></script>
defer模式下, js也是异步加载的,defer资源会在DOMCONTENTLODED执行之前, 并且defer执行是有顺序加载的, 如果设置有多个defer会按照引入的顺序执行, 即便后面的script先返回;
使用场景: 一般情况下都可以使用 defer，特别是需要控制资源加载顺序时;
4.module模式
<script type="module" src="index.js"></script>
script 标签的属性可以加上 type="module"，浏览器会对其内部的 import 引用发起 HTTP 请求，获取模块内容。这时 script 的行为会像是 defer 一样，在后台下载，并且等待 DOM 解析;
使用场景: 如Vite 就是利用浏览器支持原生的 es module 模块，开发时跳过打包的过程，提升编译效率;