基本概念

默认情况下js的脚本执行是同步和阻塞的，但是 <script> 标签有 defer 和 async 属性, 这可以改变脚本的执行方式。
如：

要注意一点，html5 中这些属性只在和src属性联合使用时才有效。
如果同时指定了两个属性，则会遵从async属性而忽略defer属性。

作用

• defer 属性标注的脚本是延迟脚本，使得浏览器延迟脚本的执行，也就是说，脚本会被异步下载但是不会被执行，直到文档的载入和解析完成，并可以操作，脚本才会被执行。

• async 属性标注的脚本是异步脚本，即异步下载脚本时，不会阻塞文档解析，但是一旦下载完成后，立即执行，阻塞文档解析。

区别

延迟脚本会按他们在文档里的出现顺序执行

异步脚本在它们载入后执行，但是不能保证执行顺序。

两者的区别在于执行时的不同：

async 脚本在script文件下载完成后会立即执行,并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行。
与此相对，浏览器确保多个 defer 脚本按其在HTML页面中的出现顺序依次执行,且执行时机为DOM解析完成后，document的DOMContentLoaded 事件触发之前。

所以说，async 是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。
defer和async的主要不同就是defer会保证脚本的顺序，defer 是最接近我们对于应用脚本加载和执行的要求的。