当前位置：首页 > backend >正文

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

backend 2025/7/30 8:25:53

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`	❌