*HTML `＜script＞` 标签中的核心属性解析：掌控脚本加载与实行的艺术

---

HTML <script> 标签中的核心属性：掌控脚本加载与实行的艺术

在网页开发中，<script> 标签是 JavaScript 的“入口”。它不但决定了脚本如何加载和实行，还深刻影响着页面性能、安全性和跨域计谋。本文将深入解析 <script> 标签中常见的 8 个核心属性，帮助你更好地把握前端开发中的关键细节。

src 是 <script> 标签最基础的属性，用于指定外部 JavaScript 文件的路径。当浏览器遇到带有 src 的 <script> 标签时，会暂停 HTML 解析，加载并实行外部脚本。

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

复制代码

关键点：

• 内联脚本（即直接写在 <script> 标签内的代码）会被忽略，由于 src 优先级更高。
  
• 外部脚本的加载和实行会壅闭页面渲染（除非使用 async 或 defer）。
  

---

2. type：界说脚本的范例

type 属性用于声明脚本的 MIME 范例。在 HTML5 中，浏览器默认将 <script> 标签内的内容视为 text/javascript，因此通常可以省略。但 type 的其他值（如 module）具有特殊用途。

1. <!-- 普通脚本 -->
2. <script type="text/javascript">console.log("Hello, world!");</script>
4. <!-- ES6 模块 -->
5. <script type="module">
6.   import { greet } from './module.js';
7.   greet();
8. </script>

复制代码

关键点：

• type="module" 允许使用 ES6 模块语法（import/export），并自动启用严格模式。
  
• 使用模块时，浏览器会优先处理惩罚模块脚本，纵然未指定 defer 或 async。
  

---

3. async：异步加载，立即实行

async 是一个布尔属性，表示脚本应异步加载。浏览器会在下载脚本的同时继承解析 HTML，一旦脚本下载完成，立即实行。此属性适用于独立脚本（不依靠 DOM 或其他脚本）。

1. <script src="analytics.js" async></script>

复制代码

关键点：

• 不包管实行次序：多个 async 脚本的实行次序与它们在文档中的次序无关。
  
• 不壅闭页面渲染：适合加载第三方统计脚本（如 Google Analytics）。
  

---

4. defer：延迟加载，按次序实行

defer 与 async 类似，但脚本会在 HTML 解析完成后，按照文档中的次序依次实行。它适合必要操纵 DOM 或依靠其他脚本的场景。

1. <script src="init.js" defer></script>

复制代码

关键点：

• 包管实行次序：多个 defer 脚本会按出现次序实行。
  
• 在 DOMContentLoaded 事件前实行：确保脚本在页面完全解析后运行。
  

---

5. charset：界说外部脚本的字符编码

charset 用于指定外部脚本文件的字符集。当代浏览器默认使用 UTF-8 编码，因此该属性在多数情况下可忽略。

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

复制代码

关键点：

• 仅在脚本文件使用非 UTF-8 编码时必要显式声明。
  
• 当代开发中险些不再必要手动设置此属性。
  

---

6. crossorigin：跨域资源共享（CORS）控制

crossorigin 用于设置跨域哀求的 CORS 计谋，支持两种值：

• anonymous：不发送用户凭证（如 Cookie）。
  
• use-credentials：发送用户凭证，需服务器配合设置 Access-Control-Allow-Credentials。
  

1. <script src="https://cdn.example.com/script.js" crossorigin="anonymous"></script>

复制代码

关键点：

• 与 integrity 配合使用时，确保跨域资源的安全性。
  
• 常用于从 CDN 加载脚本或字体资源。
  

---

7. integrity：子资源完备性校验

integrity 通过加密哈希值验证外部脚本是否被篡改。如果资源的哈希值与 integrity 指定的值不匹配，浏览器会拒绝实行该脚本。

1. <script src="https://cdn.example.com/script.js"
2.         integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
3.         crossorigin="anonymous"></script>

复制代码

关键点：

• 必须与 crossorigin 一起使用。
  
• 防止 CDN 资源被恶意更换，保障安全性。
  

---

8. language：已废弃的属性

language 是早期 HTML 中用于指定脚本语言的属性（如 JavaScript 或 VBScript）。HTML5 已弃用此属性，推荐使用 type 替代。

1. <!-- 不推荐 -->
2. <script language="JavaScript">alert("Hello");</script>

复制代码

关键点：

• 所有当代浏览器均忽略此属性。
  
• 仅在维护遗留代码时大概遇到。
  

---

总结：合理使用属性，优化网页性能与安全

属性用途是否推荐src加载外部脚本✅type界说脚本范例（如模块）✅async异步加载脚本（不包管次序）✅defer延迟加载脚本（按次序实行）✅charset指定脚本字符编码（当代浏览器默认 UTF-8）❌crossorigin设置跨域哀求计谋✅integrity验证资源完备性，防止篡改✅language已废弃，推荐使用 type❌实践建议：

• 对于独立脚本（如统计代码），使用 async 避免壅闭页面。
  
• 对于依靠 DOM 或其他脚本的代码，使用 defer 包管实行次序。
  
• 使用 type="module" 开发模块化应用，提升代码可维护性。
  
• 从 CDN 加载资源时，始终搭配 crossorigin 和 integrity 以确保安全。
  

---

通过机动运用这些属性，你可以更高效地管理 JavaScript 的加载与实行，从而提升网页性能、加强安全性，并适应当代开发的最佳实践。下次编写 HTML 时，不妨多注意这些“小细节”，它们大概是优化用户体验的关键！