async和defer是HTML中<script>标签的两个属性，用于控制外部JavaScript脚本的加载和执行方式。defer属性使得脚本在页面解析完成后按顺序执行，而async属性则允许脚本异步加载，不保证执行顺序。使用defer和async可以优化页面加载性能，避免阻塞DOM构建。
在<script>标签中存在两个相似的属性async和defer，这两者有什么区别呢？
推迟执行脚本
浏览器遇到定义了defer属性的script脚本时会立即下载，但是等整个页面都解析完后才执行，也就是推迟脚本的执行。脚本推迟执行了，但是依旧按照标签出现的顺序执行，即第一个推迟脚本会在第二个推迟脚本之前执行，第二个推迟脚本会在第三个推迟脚本之前执行。defer属性只对外部脚本文件有效。
异步执行脚本
浏览器遇到定义了 async属性的脚本时，会异步加载脚本文件，即不会阻塞页面的解析渲染，当脚本文件下载完毕后会立即执行并阻塞页面的解析。如果有多个被async标注的脚本文件，那么并不能保证脚本文件会按照出现的顺序执行，即第二个出现的脚本可能会比第一个先执行。同样async属性只对外部脚本文件有效。 给脚本添加async属性是为了告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。正因为如此，异步脚本不应该在加载期间修改DOM。
可以用一张图形象对比这两个属性的区别：
用图表示会更容易理解一点。
扫一扫
841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
