HTML中最熟悉的陌生人:<script>标签必知必会

<script>标签用于在HTML中引入js,本文主要讨论三方面:

加载与执行的区别

脚本的加载（Loading）与执行（Execution）是两个独立的概念，它们的行为和影响因素不同，理解这一点对我们后面的讨论至关重要.

不阻塞 DOM 解析 ,浏览器会先解析完整的 HTML，最后再加载和执行脚本，不会影响页面渲染速度。用户能更快看到页面内容（减少 FCP，First Contentful Paint）。
脚本执行时 DOM 已就绪 ,脚本运行时，整个 DOM 已经解析完成，可以安全操作 DOM 元素，无需等待 DOMContentLoaded 事件。
适用场景
- 推荐的经典做法，适用于大多数情况，特别是依赖 DOM 的脚本（如交互逻辑、初始化组件）。
- 如果脚本较大，仍可能影响 DOMContentLoaded 事件触发时间。

遵循多个脚本按书写顺序依次加载并执行的原则。

html 复制代码

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

行为：
- 脚本异步加载 （不阻塞 HTML 解析），但会延迟到 DOM 解析完成后、DOMContentLoaded 事件前按顺序执行。
- 适用于需要操作 DOM 或依赖其他脚本的场景。
特点：
- 保证脚本的执行顺序（与书写顺序一致）。
- 天然支持"等 DOM 就绪"，类似 DOMContentLoaded。

html 复制代码

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

行为：
- 脚本异步加载 （不阻塞 HTML 解析），加载完成后立即执行（可能中断 HTML 解析）。
- 适用于独立脚本（如统计代码、第三方 SDK）。
特点：
- 不保证执行顺序（谁先加载完谁先执行）。
- 不适合操作 DOM 的脚本（可能 DOM 还未解析完）。

html 复制代码

<script type="module" src="module.js"></script>

场景：
- 你的代码需要按模块化拆分，通过 import 引入其他模块或通过 export 暴露功能。
  html 复制代码
```
<script type="module">
  import { utils } from './utils.js';
  import Component from './Component.js';
</script>
```
行为：
- 避免全局变量污染，依赖关系清晰，适合大型项目。
- 默认具有 defer 行为（异步加载，DOM 解析后执行）。
- 若显式添加 async（如 <script type="module" async>），则行为类似 async。
特点：
- 支持 ES6 模块语法（import/export）。
- 自动启用严格模式。
- 模块脚本默认延迟执行 ，且按依赖关系顺序执行。