script 标签

HTML

<script> 标签用于嵌入或引用可执行脚本：

<script>
    console.log('????')
</script>
<script src="./main.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>

属性

• asnyc
  async 属性指明 script 资源会被异步下载，并在下载好后立即执行（不等待其他资源或 html 解析）

async 适用于内嵌脚本（没有 src 属性），会并行执行。
type="module" 的脚本（默认 defer）声明 async，会把模块脚本和他的依赖一起放到 defer 队列里执行，所有 async 模块脚本会被并行解析、执行。

• defer
  defer 属性指明 script 资源会被异步下载，并在 DOMContentLoaded 事件触发前执行（等待 DOM tree 解析），也意味着会阻塞 DOMContentLoaded 事件的触发。

内嵌脚本（没有 scr 属性）defer 属性不起作用，故不必且不应该使用。
模块 script 默认 defer（type="module"）。

• crossorigin
  <img>, <script>, <audio>, <video>, <link> 等具有加载跨域资源能力的元素都具有该属性，定义了资源的请求是否需要携带用户凭证。

  • use-credentials: credentials flag set to 'include'，会触发 CORS，后端未处理会导致跨域报错。
  • anonymous: credentials flag set to 'same-origin'，请求头会携带 origin 字段。
  • By default (that is, when the attribute is not specified), CORS is not used at all, But any other value of missing value of crossorigin property effects the same as 'anonymous'，普通请求。

• type
  type="module" 声明这个 script 会被当做模块脚本对待；其他情况不设置。

• nomodule
  设置该属性的 script 会在浏览器不支持 es modules 特性时执行。