async和defer属性的区别

在<script>标签中存在两个相似的属性async和defer，这两者有什么区别呢？

推迟执行脚本

浏览器遇到定义了defer属性的script脚本时会立即下载，但是等整个页面都解析完后才执行，也就是推迟脚本的执行。脚本推迟执行了，但是依旧按照标签出现的顺序执行，即第一个推迟脚本会在第二个推迟脚本之前执行，第二个推迟脚本会在第三个推迟脚本之前执行。defer属性只对外部脚本文件有效。

异步执行脚本

浏览器遇到定义了 async属性的脚本时，会异步加载脚本文件，即不会阻塞页面的解析渲染，当脚本文件下载完毕后会立即执行并阻塞页面的解析。如果有多个被async标注的脚本文件，那么并不能保证脚本文件会按照出现的顺序执行，即第二个出现的脚本可能会比第一个先执行。同样async属性只对外部脚本文件有效。 给脚本添加async属性是为了告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。正因为如此，异步脚本不应该在加载期间修改DOM。
可以用一张图形象对比这两个属性的区别：
用图表示会更容易理解一点。