＜script＞元素的8个属性

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

HTML <script> 元素用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。<script> 元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言。

async:

可选，表示立即开始下载脚本，但不能阻止其他页面的动作，比如下载资源或等待其他脚本加载。只对外部脚本有效。

对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。

对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。

这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。

charset:

可先，使用src属性指定的代码字符集。

crossorigin：

可选，配置相关请求的CORS设置。默认不使用CORS。crossorigin=anonyous配置文件请求不必设置凭据标志。crossorigin=use-credentials设置凭据表示，意味着出站请求包含凭据。

那些没有通过标准CORS (en-US)检查的正常script 元素传递最少的信息到 window.onerror。可以使用本属性来使那些将静态资源放在另外一个域名的站点打印错误信息。

defer:

可选，表示在文档解析和显示完成之后再执行脚本。只对外部脚本有效。

有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。

如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。

defer 属性对模块脚本没有作用 —— 他们默认 defer。

integrity:

可选，允许比对接收到的资源和指定的加密签名用以验证子资源完整性（SRI，Subresource Intergrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，页面就会报错，脚本不执行。包含用户代理可用于验证已提取资源是否已无意外操作的内联元数据，这个属性可以用于确保内容分发网络不提供恶意内容（CDN）

language:

可选，用于表示代码块中脚本语言 （JavaScript1.2）

src:

这个属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本

type:

可选，代替language,表示代码块中脚本语言的类型（也称MIME类型）。一般这个值都是 text/javascript和text/ecmascript,目前这个两个值都不常使用了。JavaScript文件里面的MIME的类型通常都是application/x-javascript,不过给type属性值可能导致脚本被忽略。在非IE的浏览器中有效的其他值还有application/javascript和application/ecmascript。如果这个值是module，则代码会被当成ES6模块，而只有这个时候代码中才能出现import和export

参考文档

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script