异常教程

HTML script async 属性（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代网页开发中，页面加载性能始终是开发者关注的核心问题之一。随着第三方脚本（如广告、分析工具、社交分享按钮等）的广泛使用，如何平衡功能需求与页面渲染速度成为关键挑战。HTML script async 属性正是解决这一问题的重要工具。本文将从基础概念、工作原理到实际应用场景，全面解析这一属性的使用逻辑，并通过案例演示帮助读者理解其在优化网页性能中的作用。

一、脚本加载的基本原理与阻塞问题

1.1 同步加载的“交通堵塞”

在没有 async 或 defer 属性时，默认的脚本加载方式是同步阻塞加载。浏览器遇到 <script> 标签时，会暂停 HTML 解析，立即下载并执行该脚本，完成后才继续渲染页面。
比喻：这如同一位快递员送货时，必须按顺序逐个派送，遇到一个包裹时必须放下所有其他包裹，直到完成当前包裹的派送。

<!-- 同步加载示例 -->  
<script src="slow-script.js"></script>

这种模式在脚本较大或网络延迟高时，会导致页面“卡顿”，用户体验大幅下降。

1.2 阻塞渲染的后果

同步加载的负面影响包括：

  • 页面渲染停滞：用户看到的是空白页面，直到脚本执行完毕。
  • 交互延迟：用户无法与页面元素（如按钮、表单）进行交互，直到脚本加载完成。
  • SEO 潜在风险：搜索引擎对页面速度敏感，慢速加载可能影响排名。

二、async 属性：异步加载的“并行快递”

2.1 async 的核心作用

async 属性允许浏览器在继续解析 HTML 的同时，并行下载外部脚本。当脚本下载完成后，浏览器会立即执行该脚本，但此时 HTML 解析不会被中断。
比喻：这如同快递员同时派送多个包裹，每个包裹到达后立即交给用户，但不会因等待某一个包裹而暂停其他派送。

2.1.1 基本语法

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

此语法的关键点：

  • 浏览器继续解析 HTML，不等待脚本下载完成。
  • 脚本下载完成后，浏览器会暂停 HTML 解析，执行该脚本，执行完成后继续解析。

2.2 执行顺序的不确定性

由于 async 脚本的执行依赖于下载速度，多个 async 脚本的执行顺序可能与它们在 HTML 中声明的顺序不一致。例如：

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

如果 script2.js 下载更快，它可能先于 script1.js 执行。

三、async 与 defer 的对比：异步与延迟加载

3.1 defer 的特性

defer 属性与 async 类似，但执行逻辑不同：

  • 脚本下载完成后，浏览器不会立即执行，而是延迟到 HTML 解析完成后再按声明顺序执行。
<script src="defer-script.js" defer></script>

比喻：async 是“到货即派送”，而 defer 是“所有包裹到齐后再按顺序派送”。

3.2 关键区别总结

属性执行时机执行顺序保证适用场景
async下载完成后立即执行不保证第三方脚本（如统计代码）
deferHTML 解析完成后按顺序执行保证需要按顺序执行的脚本

四、async 属性的实际应用场景

4.1 第三方脚本的异步加载

典型的场景包括 Google Analytics、广告代码或社交分享按钮：

<!-- 异步加载 Google Analytics -->  
<script async src="https://analytics.example.com/analytics.js"></script>

优势：

  • 第三方脚本的加载不影响页面渲染。
  • 即使脚本加载失败，页面仍能正常显示。

4.2 优化页面关键资源的加载顺序

假设页面需要同时加载核心功能脚本和非关键的分析脚本：

<!-- 同步加载核心功能脚本 -->  
<script src="core-functions.js"></script>  

<!-- 异步加载非关键分析脚本 -->  
<script async src="analytics.js"></script>

通过区分同步和异步加载，确保核心功能优先，同时避免分析脚本拖慢页面。

五、使用 async 时的注意事项

5.1 脚本依赖关系的处理

如果脚本 A 需要依赖脚本 B 的功能，不能同时使用 async：

<!-- 错误示例：B 依赖 A，但两者异步加载可能导致 B 先执行 -->  
<script async src="a.js"></script>  
<script async src="b.js"></script>

解决方案：

  • 移除其中一个的 async 属性，或改用 defer。
  • 使用动态脚本创建（Dynamic Script Loading）： 
    const script = document.createElement('script');  
script.src = 'b.js';  
document.currentScript?.parentNode?.appendChild(script);

5.2 浏览器兼容性

async 属性在现代浏览器（如 Chrome、Firefox、Safari）中均支持，但需注意旧版 IE 的兼容性。可通过 Polyfill 或条件注释处理。

六、性能优化案例：重构阻塞式脚本

6.1 问题场景

假设一个页面包含以下脚本：

<!-- 同步加载三个脚本 -->  
<script src="jquery.js"></script>  
<script src="analytics.js"></script>  
<script src="custom.js"></script>

由于 analytics.js 和 custom.js 不影响页面渲染，同步加载导致页面加载时间过长。

6.2 优化方案

<!-- 保留核心库的同步加载 -->  
<script src="jquery.js"></script>  

<!-- 将非关键脚本改为异步 -->  
<script async src="analytics.js"></script>  
<script async src="custom.js"></script>

效果：

  • HTML 解析不再被 analytics.js 和 custom.js 阻塞。
  • 页面渲染速度提升，用户可更快看到内容。

七、进阶技巧：结合动态脚本加载

7.1 按需加载脚本

通过 JavaScript 动态创建 <script> 标签，可实现更精细的加载控制：

function loadScript(url) {  
  const script = document.createElement('script');  
  script.src = url;  
  script.async = true;  
  document.body.appendChild(script);  
}  

// 在页面加载完成后加载非关键脚本  
window.addEventListener('load', () => {  
  loadScript('analytics.js');  
});

优势：

  • 可结合用户行为（如点击按钮）触发加载，进一步减少初始加载压力。

7.2 模块化加载与 async

随着 ES 模块的普及，可通过 type="module" 结合 async 实现模块化异步加载：

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

但需注意模块化脚本的加载可能引入新的依赖关系，需谨慎设计。

八、常见问题解答

Q1：为什么 async 脚本有时会阻塞页面渲染？

A：如果脚本体积过大（如超过 1MB），即使使用 async，执行时仍可能短暂阻塞主线程。建议拆分或压缩脚本。

Q2：async 和 defer 是否能同时使用？

A：不能。同时设置时，浏览器会优先遵循 async 的行为。

Q3：如何调试异步脚本的执行顺序？

A：在脚本开头添加 console.log，通过浏览器控制台观察输出顺序。

结论

HTML script async 属性是优化网页性能的利器，尤其适用于第三方脚本和非关键功能的加载。通过理解其工作原理、合理选择 async 或 defer，以及结合动态加载策略，开发者可以显著提升页面加载速度，同时保持功能完整性。在实际开发中，建议始终将核心功能脚本同步加载，将非必要脚本异步化，并通过监控工具（如 Lighthouse）持续优化性能指标。

未来，随着 Web 标准的演进（如 HTTP/3 和 Service Workers 的普及），异步加载的策略将进一步扩展，但 async 属性作为基础工具的地位依然不可替代。掌握这一属性，是每个 Web 开发者的必备技能。

最新发布

查看更多文章