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

---

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

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

---

1. src：脚本的来源地址

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

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

关键点：

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

---

2. type：定义脚本的类型

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

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

关键点：

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

---

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

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

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

关键点：

• 不保证执行顺序：多个 async 脚本的执行顺序与它们在文档中的顺序无关。
• 不阻塞页面渲染：适合加载第三方统计脚本（如 Google Analytics）。

---

4. defer：延迟加载，按顺序执行

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

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

关键点：

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

---

5. charset：定义外部脚本的字符编码

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

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

关键点：

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

---

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

crossorigin 用于配置跨域请求的 CORS 策略，支持两种值：

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

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

关键点：

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

---

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

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

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

关键点：

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

---

8. language：已废弃的属性

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

<!-- 不推荐 -->
<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 时，不妨多留意这些“小细节”，它们可能是优化用户体验的关键！