JavaScript ＜script＞

JavaScript script 元素

script元素

script 元素有 8 个属性：

• async: 可选。表示应该立即执行下载脚本，当不能阻止其他页面动作，比如下载资源或者等待其他脚本加载。只对外部脚本有效。

• charset：可选。使用 src 属性指定的代码字符集。这个属性很少使用，因为大多数浏览器都不在乎它的值。

• crossorigin：可选。配置相关请求的 CORS (跨域资源请求)设置。默认不使用 CORS。crossorigin=“anonymous” 配置文件请求不必设置凭据标志。 crossorigin=“use-credentials” 设置凭据标志，意味着出站请求会包括凭据。

• integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面报错，脚本不会执行，这个属性可以用于确保内容分发网络（CDN）不会提供恶意内容。

• language：废弃。表示代码块中的脚本语言。

• src：可选。表示包含要执行的代码外部文件。

• type：可选。代替language，表示代码块中脚本语言的内容类型（MIME类型）。这个值始终都是 “text/javascript”，尽管"text/javascript" 和 "text/ecmascript"已经废弃了，javascript 文件的 MIME 类型通常是 “application/x-javascript”，还有其他值。如：“application/javascript” 和 “application/ecmascript”。如果这个值是 module，则代码会被当做 ES6 模块，只有这个时候才能出现 import 和 export 关键字。

执行脚本方式：

推迟执行脚本

​ 在 head 标签头部，script 标签中使用 defer 属性。例如：

<script defer src="example.js"></script>

​ defer 属性表示：文件立即开始下载，但是延迟执行。等到浏览器解析到 标签后才会执行。且在 DOMContentLoaded 事件之前执行。

异步执行脚本

​ 在 head 标签头部，为 script 元素定义 async 属性。例如：

​ <script async src="example.js"></script>

​ async 属性表示：立即开始下载，不必等脚本下载和执行完成后再加载页面。

动态加载脚本：

创建一个 example.js 文件：

let script = document.createElement("script");
script.src = "example.js";
document.head.appendChild(script);

在把 HTMLElement 元素添加到 DOM 且执行到这段代码之前不会发送请求。默认这种方式创建的 script 元素是以异步方式加载的，相当于 async 属性。但是不是所有浏览器都支持 async 属性。

最有效的方法是在头部写如下代码：

<link rel="preload" href="example.js">

注意事项：

• script 元素最好放在 body标签中的内容后面，因为在加载 script 中的代码或者加载外部文件的时候会等待文件或者代码执行完成后再执行后面的。如果放在 head 标签中，后面 body 标签中的 HTML 代码就要进行等待，如果 script 元素中的代码很多，则会造成页面一段时间空白。
• 假如是在 script 元素行内中写代码，要防止出现 " "这个字符串，如果必须出现则使用转义字符来表示： “</script>”。
• 如果使用外部文件，这使用 src 属性，确保传入的 URL 有效，且不能留空白。在出现 src 属性时，不要在 script 元素的行内中写任何代码，否者会被忽略。