script标签中defer与async与不写的区别

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

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

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

   有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

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

   有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），可是 script.js 的执行要在全部元素解析完成以后，DOMContentLoaded 事件触发以前完成。

1. 蓝色线表明网络读取，红色线表明执行时间，这俩都是针对脚本的；绿色线表明 HTML 解析。

2. 此图告诉咱们如下几个要点：

3. defer 和 async 在网络读取（下载）这块儿是同样的，都是异步的（相较于 HTML 解析）
4. 它俩的差异在于脚本下载完以后什么时候执行，显然 defer 是最接近咱们对于应用脚本加载和执行的要求的
5. 关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
6. async 则是一个乱序执行的主，反正对它来讲脚本的加载和执行是牢牢挨着的，因此无论你声明的顺序如何，只要它加载完了就会马上执行
7. 仔细想一想，async 对于应用脚本的用处不大，由于它彻底不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些能够不依赖任何脚本或不被任何脚本依赖的脚原本说倒是很是合适的，最典型的例子：Google Analytics