哪些浏览器支持 `<script async="async"/>`?

在前端开发中,我们经常会使用 <script> 标签来加载 JavaScript 文件。如果你想让页面更快地加载并且不影响页面其他元素的渲染,你可以使用 async 属性来异步加载脚本。

async 属性简介

使用 async 属性可以将脚本标记为异步,这意味着脚本将在加载完成后立即执行,并且不会阻止页面其他元素的渲染。这一点与默认情况下(即没有 asyncdefer 属性)加载的脚本不同,后者会在加载时阻塞文档的解析和渲染。

当一个脚本有 async 属性时,它的执行顺序不能保证。因此,如果你有多个 <script async> 脚本,它们可能以任意顺序执行。

支持 async 属性的浏览器

根据 Can I Use 的数据,目前几乎所有现代浏览器都支持 async 属性。其中包括:

  • Chrome 8+
  • Firefox 3.6+
  • Safari 5.1+
  • Opera 10.6+
  • Edge 12+

需要注意的是,Internet Explorer 11 及更早版本不支持 async 属性。如果你需要在这些浏览器中使用异步脚本加载,请考虑使用其他方案,如动态创建 <script> 标签并手动添加到文档中。

示例代码

下面是一个示例,它演示了如何使用 <script async> 标记来加载一个 JavaScript 文件:

--------- -----
------
  ------
    ------------ ------ ------------
  -------
  ------
    --------- ------ ---------
    ------- -- ---- ------------
    ------- ----- -----------------------------------
  -------
-------

在这个例子中,myScript.js 文件将被异步加载,并且页面其他元素的渲染不会被阻塞。当文件加载完成后,脚本将立即执行。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/9194