HTML <script> async 属性

HTML <script> 标签

定义和用法

async 属性是一个布尔属性。

如果设置了 async 属性，脚本会在解析页面的同时并行下载，并在可用时立即执行。一旦脚本完全下载，页面的解析就会中断，然后执行脚本，然后继续解析页面的其余部分。

注意：async 属性仅适用于外部脚本（并且只应在存在 src 属性时使用）。

注意：可以通过多种方式执行外部脚本：

  • 如果已设置 async：脚本会在解析页面的同时并行下载，并在可用时立即执行（在解析完成之前）
  • 如果已设置 defer（而未设置 async）：脚本会在解析页面的同时并行下载，并在页面解析完成后执行
  • 如果既没有 async 也没有 defer：脚本被立即下载并执行，阻塞页面解析，直到脚本执行完成

实例

引用的脚本会在解析页面的同时并行下载，并在可用时立即执行的：

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

亲自试一试

语法

<script async>

异步执行脚本

浏览器遇到 script 元素时的默认行为是在加载和执行脚本的同时暂停处理页面。各个 script 元素依次（按其定义的次序）同步（在脚本加载和执行过程中不再管别的事情）执行。

作为处理脚本的默认方式，同步顺序执行自有其意义。不过有些脚本并不需要这样处理，对这类脚本可以使用 async 属性提高其性能。这方面的一个典型例子是跟踪脚本（tracking script）。这种脚本可以汇报用户的网站访问记录以便广告公司根据用户的习惯定制和投放广告，或者搜集网站访问者的统计数据以供分析，诸如此类。这些脚本自成一体，一般不需要与 HTML 文档中的元素互相作用。为等待它们加载然后向自己的服务器发回报告而推迟显示页面没有任何意义。

使用了 async 属性后，浏览器将在继续解析 HTML 中其他元素（包括其他 script 元素）的同时异步加载和执行脚本。如果运用得当，这可以大大提高整体加载性能。

注意：使用 async 属性的一个重要后果是页面中的脚本可能不再按定义它们的次序执行。因此，如果脚本使用了其他脚本中定义的函数或值，那就不宜使用 async 属性。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 10.0 3.6 5.1 15.0

HTML <script> 标签