async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。
async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞，这一点和defer属性类似。然而async属性比较任性，只要脚本被浏览器下载完成之后就会立即执行，不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoaded事件之前或者之后执行。并且它在执行的时候会阻塞DOM树的构建。代码如下图所示：
下面我们看一下，async属性和defer属性的区别，下方的图片很详细。
[![](https://www.xvzhu.cn/archives/135.html "
那我们这个async属性有什么用呢？感觉有defer属性就够了，其实当我们引用那些统计网站数据的第三方脚本的时候就可以使用async属性。它的执行不会影响当前站点的DOM树渲染，就比如百度收录的验证代码或者bing的还有统计网站的其他代码或广告代码。
感谢大家观看
![[[流泪]]](https://www.xvzhu.cn/usr/themes/freewind/static/img/face/emotions/5.gif)
defer属性在javascript标签中有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮
游客
2026-03-08 22:41
回复
[...]我们知道，当浏览器在执行到script标签的时候，首先会停止构建DOM树，然后下载Javascript文件并且执行，当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢？原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘，尤其是现[...]