script 标签上有那些属性

以下是对<script>标签上各个属性的详细解释：

1. src 属性

• 定义：
  • src 属性用于指定要加载的外部脚本文件的 URL 地址。这个 URL 可以是相对路径（相对于当前 HTML 文件所在的目录），也可以是绝对路径。
• 示例：

  <script src="scripts/main.js"></script>
  

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

2. type 属性

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

  <script type="text/javascript">// JavaScript 代码
  </script>
  

  或在 HTML5 中更简洁的形式：

  <script>// JavaScript 代码
  </script>
  

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

3. async 属性

• 定义：
  • 这是一个布尔属性，当存在时，表示脚本以异步方式加载和执行。
• 示例：

  <script async src="scripts/asyncScript.js"></script>
  

• 作用：
  • 当浏览器遇到带有 async 属性的 <script> 标签时，会在后台开始下载脚本文件，同时继续解析 HTML 文档。一旦脚本下载完成，会立即暂停文档的解析，开始执行该脚本。这种特性在提高页面加载速度方面非常有用，尤其是对于一些不依赖于页面 DOM 结构的脚本，例如一些统计分析脚本、广告脚本等。它可以让页面在脚本下载的同时继续加载其他内容，避免了对整个页面解析和渲染过程的阻塞。但需要注意的是，多个 async 脚本的执行顺序是不确定的，因为它们是哪个先下载完成哪个就先执行，可能会导致脚本之间的依赖问题，因此对于有依赖关系的脚本需要谨慎使用。

4. defer 属性

• 定义：
  • 同样是一个布尔属性，它会使脚本在后台下载，但会延迟到整个 HTML 文档解析完成后，在 DOMContentLoaded 事件触发之前执行。
• 示例：

  <script defer src="scripts/deferScript.js"></script>
  

• 作用：
  • 与 async 属性类似，旨在优化页面的加载性能。不过，defer 属性确保了脚本会在 DOM 解析完成后，按照 <script> 标签在 HTML 文档中的顺序依次执行。对于那些需要操作 DOM 元素但又不希望阻塞页面解析的脚本，使用 defer 属性可以保证脚本执行时 DOM 元素已经准备好，并且能按照代码中 <script> 标签的先后顺序执行，避免了 async 属性可能导致的执行顺序混乱问题，非常适合那些需要在 DOM 准备好之后才可以安全执行的脚本。

5. charset 属性

• 定义：
  • 用于指定外部脚本文件的字符编码。在现代网络开发中，通常默认使用 UTF-8 编码，并且大多数服务器会在响应头中正确设置字符编码。
• 示例：

  <script src="scripts/script.js" charset="UTF-8"></script>
  

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

6. crossorigin 属性

• 定义：
  • 该属性用于配置跨域请求脚本的 CORS（跨域资源共享）设置，其值可以是 anonymous（默认）、use-credentials 等。
• 示例：

  <script crossorigin="anonymous" src="https://external-domain.com/script.js"></script>
  

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

7. integrity 属性

• 定义：
  • 包含一个加密哈希值，基于 Subresource Integrity（SRI）机制，用于验证脚本文件在传输过程中是否被篡改。
• 示例：

  <script integrity="sha256-[hash-value]" src="scripts/script.js"></script>
  

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

通过合理使用 <script> 标签的这些属性，可以更好地管理脚本的加载顺序、执行时间、跨域问题和安全性，以实现更高效、更安全的网页开发。