defer和async的区别

script标签用于加载脚本与执行脚本，是前端开发中非常重要的标签
直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载及执行分过程中，会阻塞后续的DOM渲染。
现在script提供了async和defer两个属性来解决DOM渲染阻塞的问题

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

<script src="script.js"></script>

一、async 和 defer加载比较

1、async

<script async src="script.js"></script>

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
异步脚本不能保证按照它们在页面中出现的次序执行。

2、defer

<script defer src="script.js"></script>

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
推迟的脚本原则上按照它们被列出的次序执行。

从上图分析可知:
1.defer和async在网络读取（下载）这一阶段是一样的，相对于html解析来说都是异步的。
2.两者之间的差别是script脚本下载完后何时执行。defer是最接近我们对于应用脚本加载和执行要求的。
3.对async而言，脚本的加载和执行是紧挨着的，不管声明顺序如何，只要加载完就会立即执行
4.async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

二、推荐应用场景

1、defer

如果你的脚本代码依赖于页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖。 例： 评论框、代码语法高亮 、polyfill.js

2、async
async

如果你的脚本并不关心页面中的DOM元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。 如：百度统计、Google
Analytics 如果不太能确定的话，用defer总是会比async稳定。。。

链接：https://www.jianshu.com/p/c0c6e2382898