async 和 defer

当浏览器遇到 script 标签时，解释器在下载解析执行js代码期间会阻塞页面其余部分的渲染，脚本执行完毕后才会继续解析文档；
对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟，为了避免这个问题，建议把全部的js引用放在</body>标签之前。

 当我们的浏览器在遇到 script 脚本的时候：大致可以分为以下三种情况：

1.没有 defer 或 async
   <script src="script.js"></script>
   浏览器会立即加载并执行指定的脚本，所有的script元素都会按照它们在页面中出现的先后顺序依次被解析
   只有在解析完前面的script元素中的代码之后，才会开始解析后面的script元素中的代码。

2.有 async标志的脚本
   <script async src="script.js"></script>
   加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
   使用async属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。但是不能保证异步脚本按照它们在页面出现的顺序执行。

3.有defer标志的脚本
   <script defer src="myscript.js"></script>
   加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后。

区别

defer在所有元素都执行完了以后才会执行；async则是加载与执行并行进行（异步）