async和defer

<script src="script.js"></script>
没有defer或者async，浏览器会立刻加载并执行脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
使用async。加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）。
<script defer src="myscript.js"></script>
使用defer，加载后续文档元素的过程将和script.js的加载并行进行（异步），但是script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。

async和defer的区别

正常情况下，当浏览器在解析HTML源文件时如果遇到外部的script，那么解析过程会暂停，并发送请求来下载script文件，只有script完全下载并执行后才会继续执行DOM解析。
  那么如果一个页面有很多的外链的脚本。放在head中，那么加载脚本的时候就会阻塞页面的渲染，出现空白的现象。在简单的开发环境中可能调整一下js的位置就能解决问题。但是在越来越复杂的开发环境下，如果想调整js脚本的位置可能就要花费大量的时间。所以为了让这种成本降低。可以使用defer属性。
  如果一个script加了defer属性，即使放在head里面，它也会在html页面解析完毕之后再去执行，也就是类似于把这个script放在了页面底部。
  对于async，这个是html5中新增的属性，它的作用是能够异步的加载和执行脚本，不因为加载脚本而阻塞页面的加载。一旦加载到就会立刻执行。

相同点：

• 加载文件时不阻塞页面渲染。
• 对于inline的script无效。
• 使用这两个属性的脚本中不能调用document.write方法。
• 有脚本的onload的事件回调。

不同点：

• html4.0中定义了defer，html5.0中定义了async。
• async属性的脚本会在下载结束后立刻执行，同时会在window的load事件之前执行，所以就会出现顺序被打乱的情况；defer属性的脚本是在页面解析完成后，按照顺序执行，同时会在document的DOMContentLoaded之前执行。

总体来说，defer和async的主要不同就是defer会保证脚本的顺序，async不保证顺序。