<script>标签的defer属性和async属性用来控制外部文件的加载和执行方式。它对于改善网页的加载速度有很大帮助。
但是他们的机制不同，defer属性不会阻塞DOM树的渲染，并且defer属性的执行是在DOM树渲染之后DOMContentLoaded事件之前执行，还有就是多个defer属性执行是按照代码顺序执行的。
async属性在执行的时候也不会阻塞DOM树的构建，但是它不会保证是不是在DOMContentLoaded之前或者之后执行，并且多个async属性的标签不按照顺序依次执行，因为它是独立的哪一个先加载完哪一个先运行。
运行场景
由于以上特性造成了他们的使用场景不同，defer属性通常是用在DOM树构建完成操作DOM的场景，并且对script脚本的运行顺序有限制的。
然而async属性通常使用在对网站检控或者广告类型的这些对DOM树构建不需要依赖的，独立运行的js脚本。
现代化框架开发解决方案
在现代化框架开发过程中，往往不需要我们自己来配置async或者defer:
在使用脚手架或者自己搭建的webapck或者vite项目进行打包时，它会根据需要帮我们加上defer属性。
某些情况下我们想要进行性能优化时，也可以手动的加上async属性,例如一些第三方的分析工具或者广告追踪脚本。
感谢大家观看
[...]我们知道，当浏览器在执行到script标签的时候，首先会停止构建DOM树，然后下载Javascript文件并且执行，当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢？原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘，尤其是现[...]
[...]async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞，这一点和defer属性类似。然而async属性比较任性，只要脚本被浏览器下载完成之后就会立即执行，不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoad[...]
我热爱 旅游专栏。令人惊艳了解路线。
欣赏你的照片, 我明白, 世界很美。感谢 旅行灵感。
读起来像小说。继续保持 带来的灵感。
让人精神焕发的 帖子! 我准备订票了。
以后焦虑了或者迷茫了记得回来看看![[[流泪]]](https://www.xvzhu.cn/usr/themes/freewind/static/img/face/emotions/5.gif)
我非常喜欢 出行博客。鼓舞人心查看路线。
你们的博客 百分百 帮助选择路线。坚持!
信息丰富的 出行资源! 越来越棒!