别再混淆了！一文搞懂script标签中async和defer的实战区别（附性能对比）
别再混淆了！一文搞懂script标签中async和defer的实战区别（附性能对比）
在现代前端开发中，页面性能优化是一个永恒的话题。而<script>标签的加载策略，尤其是async和defer这两个属性的使用，往往成为开发者容易混淆却又至关重要的知识点。本文将带你深入理解它们的区别，并通过实际案例和性能测试，帮助你在不同场景下做出最佳选择。
1. 理解基础概念：同步与异步加载
在深入探讨async和defer之前，我们需要先理解JavaScript脚本加载的基本机制。浏览器解析HTML文档时，遇到<script>标签会如何处理？这直接关系到页面的渲染性能和用户体验。
1.1 传统同步加载的问题
传统的脚本加载方式是同步的，即浏览器遇到<script>标签时会立即停止HTML解析，下载并执行脚本，完成后才继续解析文档。这种方式虽然简单直接，但会带来明显的性能问题：
<script src="main.js"></script>同步加载的缺点：
- 阻塞HTML解析和页面渲染
- 延长页面加载时间
- 可能导致用户看到空白页面
1.2 异步加载的引入
为了解决同步加载的问题，HTML5引入了async和defer属性，它们都能实现脚本的异步加载，但执行时机却大不相同：
<script async src="analytics.js"></script> <script defer src="app.js"></script>这两种方式都不会阻塞HTML解析，但它们的执行时机和行为有着本质区别，这也是开发者经常混淆的地方。
2. async与defer的机制解析
2.1 async的工作机制
async属性告诉浏览器可以异步加载脚本，但一旦加载完成就立即执行：
<script async src="script.js"></script>async的特点：
- 脚本加载与HTML解析并行进行
- 脚本一旦下载完成，立即执行
- 执行时会阻塞HTML解析
- 多个async脚本的执行顺序不确定
提示：async适用于那些不依赖DOM且不需要按特定顺序执行的脚本，如分析统计代码。
2.2 defer的工作机制
defer属性同样实现异步加载，但会延迟执行直到HTML解析完成：
<script defer src="script.js"></script>defer的特点：
- 脚本加载与HTML解析并行进行
- 脚本执行延迟到HTML解析完成后
- 多个defer脚本按它们在文档中的顺序执行
- 不会阻塞DOMContentLoaded事件
2.3 关键区别对比
| 特性 | 无属性 | async | defer |
|---|---|---|---|
| 加载是否阻塞HTML解析 | 是 | 否 | 否 |
| 执行时机 | 立即 | 加载完成后立即 | DOM解析完成后 |
| 执行顺序保证 | 按文档顺序 | 不确定 | 按文档顺序 |
| 适合场景 | 简单页面 | 独立脚本 | DOM依赖脚本 |
3. 实战性能对比分析
理论了解后，让我们通过实际测试来看看不同加载策略对页面性能的影响。
3.1 测试环境搭建
我们创建一个包含多个脚本的测试页面，使用Chrome DevTools的Performance面板进行分析：
<!DOCTYPE html> <html> <head> <title>加载策略测试</title> <!-- 测试不同加载方式的脚本 --> <script src="sync-script.js"></script> <script async src="async-script.js"></script> <script defer src="defer-script.js"></script> </head> <body> <!-- 页面内容 --> </body> </html>3.2 性能指标对比
通过Performance面板记录页面加载过程，我们关注以下关键指标：
- FP (First Paint): 首次绘制时间
- FCP (First Contentful Paint): 首次内容绘制时间
- DOMContentLoaded: DOM解析完成时间
- Load: 页面完全加载时间
测试结果分析：
- 无属性脚本：明显延迟FP和FCP
- async脚本：FP和FCP提前，但DOMContentLoaded可能被延迟
- defer脚本：FP和FCP最早，DOMContentLoaded最稳定
3.3 网络条件模拟
使用Chrome的Network Throttling模拟不同网络环境：
| 网络条件 | 无属性 | async | defer |
|---|---|---|---|
| 高速网络 | 差异小 | 差异小 | 差异小 |
| 3G网络 | 延迟明显 | 部分改善 | 最佳表现 |
| 高延迟网络 | 问题严重 | 较好 | 最优 |
4. 实际开发中的最佳实践
理解了原理和性能影响后，我们来看如何在项目中合理应用这些知识。
4.1 何时使用async
async最适合以下场景：
- 独立运行的第三方脚本（如分析、广告）
- 不操作DOM的脚本
- 不依赖其他脚本的代码
<!-- Google Analytics --> <script async src="https://www.google-analytics.com/analytics.js"></script>4.2 何时使用defer
defer是大多数应用脚本的理想选择：
- 需要操作DOM的脚本
- 有执行顺序依赖的多个脚本
- 应用初始化代码
<!-- 应用主脚本 --> <script defer src="app.js"></script> <!-- 依赖库 --> <script defer src="lib.js"></script>4.3 现代模块化方案
随着ES Modules的普及，我们有了更多选择：
<script type="module" src="app.js"></script>模块脚本的默认行为：
- 自动defer（除非显式设置async）
- 支持import/export语法
- 严格的CORS策略
5. 常见误区与疑难解答
即使理解了原理，实际开发中仍会遇到各种问题。以下是开发者常犯的错误：
5.1 执行顺序的误解
错误认知：认为async脚本会按文档顺序执行
实际情况：async脚本谁先下载完谁先执行，顺序无法保证
<!-- 这三个脚本的执行顺序是不确定的 --> <script async src="a.js"></script> <script async src="b.js"></script> <script async src="c.js"></script>5.2 DOMContentLoaded的时机
错误认知：认为async脚本不会影响DOMContentLoaded
实际情况：async脚本如果在DOM解析完成前下载完毕，其执行会延迟DOMContentLoaded
5.3 动态创建的脚本
通过JavaScript动态创建的<script>元素默认具有async行为：
const script = document.createElement('script'); script.src = 'dynamic.js'; document.head.appendChild(script); // 默认类似async要改变这一行为，可以显式设置async为false：
script.async = false; // 使其按顺序执行6. 高级应用场景
6.1 关键渲染路径优化
对于首屏关键资源，可以采用以下策略：
- 内联关键CSS和JS
- 异步加载非关键脚本
- 预加载重要资源
<!-- 预加载重要资源 --> <link rel="preload" href="critical.js" as="script">6.2 第三方脚本管理
第三方脚本往往是性能杀手，优化建议：
- 使用async加载
- 考虑延迟加载（滚动后加载）
- 设置合理的超时机制
6.3 现代框架的加载策略
主流框架如React、Vue都有自己的最佳实践：
Vue CLI项目：
<script defer src="/js/chunk-vendors.js"></script> <script defer src="/js/app.js"></script>Create React App：
<script async src="/static/js/main.xxxx.js"></script>7. 工具与调试技巧
7.1 Chrome DevTools实战
使用Performance面板分析脚本加载：
- 记录页面加载过程
- 查看Main线程活动
- 分析脚本下载和执行时间线
7.2 Lighthouse审计
Lighthouse会指出脚本加载问题：
- 阻塞渲染的脚本
- 未使用的JavaScript
- 可以延迟加载的资源
7.3 资源优先级提示
使用preload、prefetch等资源提示：
<!-- 预加载关键脚本 --> <link rel="preload" href="critical.js" as="script"> <!-- 预取可能需要的脚本 --> <link rel="prefetch" href="next-page.js" as="script">在实际项目中，我发现合理组合使用async和defer可以显著提升页面加载性能。特别是在移动端和网络条件较差的场景下，这种优化带来的用户体验提升更为明显。一个常见的做法是将核心应用代码使用defer加载，而将分析类、监控类的脚本使用async加载，这样既能保证功能正常，又不会影响页面渲染。