script 标签上有那些属性

script 标签上有那些属性

以下是对

作用:

允许将 JavaScript 代码存储在独立的文件中,这样可以实现代码的模块化和复用。通过将代码存储在外部文件中,不仅可以使 HTML 文件更简洁,还能在多个 HTML 文件中共享相同的脚本,提高代码的可维护性和组织性。同时,将脚本代码与 HTML 分离,有助于更好地管理代码版本和进行代码更新。

2. type 属性

定义:

该属性用于指定脚本的 MIME 类型。在 HTML5 及以后的标准中,JavaScript 脚本的默认 type 属性值是 text/javascript,因此在很多情况下可以省略该属性。

示例:

或在 HTML5 中更简洁的形式:

作用:

从理论上讲,它允许引入不同类型的脚本语言,但在实际应用中,几乎总是用于引入 JavaScript 代码。在早期的网页开发中,一些浏览器可能支持多种脚本语言(如 VBScript),通过 type 属性可以明确指定所使用的脚本语言类型。不过,随着 JavaScript 的广泛使用,现在该属性主要是为了向后兼容或在某些特定的场景下使用,一般默认为 JavaScript 类型。

3. async 属性

定义:

这是一个布尔属性,当存在时,表示脚本以异步方式加载和执行。

示例:

作用:

当浏览器遇到带有 async 属性的

作用:

与 async 属性类似,旨在优化页面的加载性能。不过,defer 属性确保了脚本会在 DOM 解析完成后,按照

作用:

在某些特殊情况下,当服务器没有正确设置脚本文件的字符编码,或者需要使用除 UTF-8 之外的字符编码时,charset 属性可以确保浏览器能够正确解析脚本文件。但在一般情况下,这个属性使用较少,因为 UTF-8 编码已成为网络应用的标准,并且服务器通常会正确处理字符编码问题。

6. crossorigin 属性

定义:

该属性用于配置跨域请求脚本的 CORS(跨域资源共享)设置,其值可以是 anonymous(默认)、use-credentials 等。

示例:

作用:

当从不同的源(域名、协议或端口)加载脚本时,使用 crossorigin 属性可以控制如何进行跨域请求。anonymous 表示在跨域请求时不发送凭据(如 cookie 或 HTTP 认证信息),而 use-credentials 表示在跨域请求时会发送凭据。这对于需要获取脚本文件的错误信息或对跨域请求进行更高级别的安全和权限设置时非常重要,有助于防止跨域脚本加载时的安全问题,确保跨域脚本加载符合 CORS 策略。

7. integrity 属性

定义:

包含一个加密哈希值,基于 Subresource Integrity(SRI)机制,用于验证脚本文件在传输过程中是否被篡改。

示例:

作用:

在从外部源(如 CDN)加载脚本时,通过 integrity 属性可以确保所加载的脚本的完整性和安全性。浏览器会根据该属性中的哈希值对下载的脚本文件进行验证,如果验证失败(即文件内容与哈希值不匹配),将不会执行该脚本,从而防止恶意篡改或注入恶意脚本,保障了网页的安全,防止恶意代码对网站的攻击。

通过合理使用