关于 async 和 defer 的作用及不同之处（浏览器解析过程）

1.脚本中没有async或者defer

        如果脚本中没有async或者defer，则浏览器读到这里会立刻执行，即解析到script，便停止Html的解析，开始加载并执行script文件。

2.脚本中有async

        如果脚本中有async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行,但是这样是有一个很大的问题的，那就是，async属性下的脚本文件是乱序的，下载快的脚本先执行，这对于script有先后依赖关系的情况并不适用。

3.脚本中有defer

        如果脚本中有defer，那么加载后续文档元素的过程将和 script.js 的加载并行进行（异步），也就是说，他只是一起加载，但是不是一起执行，他执行是等所有元素解析完成后，再按照加载顺序执行脚本的。

4.二者不同之处

        下载后何时执行，async是并行执行，defer是等所有的加载完成后执行。

        脚本加载完成后的执行顺序，async是乱序的，下载快的先执行，但是defer是按照加载顺序执行的，具体的，我们可以看一个图

绿色代表HTML解析 灰色是指HTML解析暂停 蓝色是指下载脚本 红色是指执行脚本

总结

         然后从实用角度来说呢，首先把所有脚本都丢到 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。还有就是，如果脚本没有执行依赖关系，那么用async,如果有，则使用defer。