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