🚀 <script>、<script async>和<script defer>的区别
欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。
总结
<script>、<script async>和<script defer>的区别主要体现在加载行为、执行时机和是否阻塞HTML解析上。
Script标签属性对比表格：
| 属性 | 加载行为 | 执行时机 | 是否阻塞 HTML |
|---|---|---|---|
<script> | 立即下载 | 下载完成后立即执行 | 是（暂停 HTML 解析） |
<script async> | 异步下载（与 HTML 解析并行） | 下载完成后立即执行（可能打断 HTML 解析） | 否（下载不阻塞），但执行会阻塞 |
<script defer> | 异步下载（与 HTML 解析并行） | 延迟到 HTML 解析完成后、DOMContentLoaded 事件前按顺序执行 | 否（下载和执行均不阻塞解析） |
🌟 关键理解要点：
- 🏝️ async 是「谁先下完谁先执行：执行时机不确定，适合完全独立的脚本（如 Google Analytics）。
- ⚡ defer 是「下完也不急，等 DOM 构建完再按顺序执行」：适合应用主逻辑（如 React/Vue 初始化）。
🌟 最佳实践建议：
- 🏝️ 优先用 defer：多数现代应用主脚本。
- ⚡用 async：独立第三方脚本（分析、广告)。
- ⚡放在 <head > 里用普通 <script >（但尽量避免阻塞）：小型内联关键逻辑（如 polyfill)。
- ⚡模块化脚本（type="module"）天然具有 defer 行为：无需额外加 defer。
<!-- 1. 普通 script：阻塞解析 -->
<script src="a.js"></script> <!-- 下载 + 执行 → 阻塞 -->
<!-- 2. async：不阻塞下载，但可能中途执行 -->
<script async src="b.js"></script>
<!-- 下载与解析并行；b.js 下完立刻执行（可能打断解析） -->
<!-- 3. defer：完全不阻塞，最后按序执行 -->
<script defer src="c.js"></script>
<script defer src="d.js"></script>
<!-- c.js → d.js 顺序执行，在 DOMContentLoaded 之前 -->