使用script async属性实现JavaScript异步是否可行？是否真的如此简单？

嘿，这个问题问到点子上了！我来给你把这事说透～

首先直接给答案：给现有script标签加上async属性，确实是让浏览器异步加载并执行这段JavaScript的方法之一，而且从操作上来说，确实就是加个属性这么简单——但它的行为细节有不少需要注意的地方，不然很容易踩坑。

先搞懂async到底干了啥 #

默认情况下，不带任何属性的script标签，浏览器的处理逻辑是：

暂停HTML解析 → 下载完这个JS文件 → 执行完JS代码 → 继续解析剩下的HTML

而加了async之后，浏览器的逻辑变成：

继续解析HTML（不阻塞） → 在后台异步下载JS文件 → 一旦JS下载完成，立刻暂停HTML解析 → 执行JS代码 → 执行完继续解析HTML

为啥说它“简单”但又不能无脑用？ #

1. 执行顺序完全看下载速度

如果你的页面里有多个带async的script标签，它们的执行顺序不是按HTML里的先后顺序来的，而是谁先下载完谁先执行。比如说你先引入了jQuery，再引入依赖jQuery的自定义脚本，都加了async的话，很可能自定义脚本先下载完先执行，这时候jQuery还没加载好，直接就报错了。

2. DOM操作可能翻车

如果你的JS代码需要操作页面上的DOM元素，加了async之后，很可能JS执行的时候，对应的DOM元素还没被解析出来（因为HTML还在同步解析）。比如你在script里写document.getElementById('header')，但async脚本下载完成时，<header>标签还没被浏览器解析，这时候获取到的就是null，代码直接失效。

解决这个问题的办法也很简单：要么把你的JS代码包裹在DOMContentLoaded事件监听里，确保DOM全部解析完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  // 这里写操作DOM的代码
});

要么如果你的脚本本来就放在<body>末尾，其实默认也不会阻塞DOM，这时候加async的收益就没那么大了。

什么时候适合用async？ #

如果你的脚本是独立无依赖的（比如统计脚本、广告脚本这类不需要依赖其他JS或DOM的代码），那加async绝对是个好选择——它能让页面更快地显示内容，提升用户体验。但如果你的脚本有依赖关系，或者需要操作DOM，那要么处理好执行顺序，要么考虑用defer属性（defer是下载完JS后，等HTML全部解析完再按顺序执行）。

总结一下：加async确实是实现JS异步的简单方法，但得结合你的脚本实际情况来用，不是随便加个属性就万事大吉哦～

内容的提问来源于stack exchange，提问作者dportney