script 标签中的 async 和 defer 属性及其他常
前言
本篇主要 script 标签中的常用属性。
本篇图片中可能用到的图例：
image.png
<script>
在解析HTML的过程中，遇到没有没有其他属性的script标签，HTML会暂停解析，发送网络请求获取JavsScript代码（当文件是外部文件时）。下载完成后，接着执行JavsScript代码。执行完成之后接着继续HTML。过程如下图：
image.png
<script async>
在解析HTML的过程中，遇到带async属性的script标签时，会以异步地方式获取JavsScript代码，此时不会阻塞HTML的解析。下载完成后，执行JavsScript代码，则会停止HTML的解析直到执行完成。过程如下图：
image.png
注意：
async属性并不会保证脚本的执行顺序，取决于网络传输结果，谁先下载完成，则先执行谁。
<script defer>
在解析HTML的过程中，遇到带defer属性的script标签时，会以异步地方式获取JavsScript代码，此时不会阻塞HTML的解析。但是需要等待HTML解析完成才开始执行。
注意：当存在多个带有
defer属性的script标签时，浏览器会保证它们的执行顺序。
image.png
script标签的其他属性
type
属性的值为 MIME 类型; 支持的 MIME 类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果没有定义这个属性，脚本会被视作 JavaScript。 如果 MIME 类型不是 JavaScript 类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。 如果 type 属性为module，代码会被当作 JavaScript 模块。
下面详细说明一下type="module":
- 只有在支持es6的浏览器中才执行
- 默认加载机制就是 defer
- 标签内的变量，是这个script标签的私有变量
nomodule
这个功能主要是用来兼容一些老版本的浏览器,比如下面的代码
<scrip type="module" src="app.js"></scrip>
<scrip nomodule src="classic-bundle.js"></scrip>
为什么上面的代码能用来兼容呢？
- 支持 module 的浏览器，设定上就不会执行 nomodule 属性的 script 脚本，所以它只会跑上方的 app.js 脚本
- 而不支持
type="module"的浏览器，会跳过这个 script 标签；同时又由于它不认识nomodule属性，反倒会执行 nomodule script 里的classic-bundle.js文件了。
integrity
设置一个hash值，用来检验加载的JS文件是否完整。比如下面的例子,integrity属性告诉浏览器：使用 sha256 算法计算 JS 文件的摘要签名，然后对比 integrity 值，如果不一致就会报错，不执行该资源。它的主要功能就是防止托管在 CDN 上的资源被篡改。
<script
src="https://unpkg.com/vue@3/dist/vue.global.js"
integrity="sha256-SEFaVqz62jl2HdhvvjEoiNWtYPHc8ElRR0qO/uTORnk=" crossorigin="anonymous">
</script>
可以通过 https://www.srihash.org/ 生成hash值。
crossorigin
crossorigin 的默认值是 anonymous（空值或是无效值都等于 anonymous），表示对跨域请求不设置凭据标志；相反，想要提供该凭证，就需要设置 crossorigin="use-credentials"。（这里的凭据，指的就是 cookies、http 里的 auth，以及客户端的 SSL 证书）
nonce
nonce属性是设置一个加密数字，需要配合 Content-Security-Policy 的 script-src 使用。举个例子，http 头的 CSP 属性如下：
Content-Security-Policy: script-src 'nonce-EfNBf03nceIOAn39fn389h3sdfa';
只有在 script 标签内带有相同 nonce 值的脚本才能执行：
<script nonce="nonce-EfNBf03nceIOAn39fn389h3sdfa" src="./hello.js"></script>
