浅析async和defer的区别

一、前言

这两个单词的概念想必大家已经熟悉到不能再熟悉了，但是今天我之所以想做这个笔记，是因为在用到属性探测神器的”Can I Use”这网站的时候，真心觉得他的ajax的真的用到出神入化了，哈哈，不过这篇文章说的不是ajax，差点说跑题了。因为出于习惯性，更是出于好奇心，打开控制台，看了一下该网站的控制台，其在兼容方面做得挺好，贴一下图吧：

但是我今天要讲的也不是这个，而是这个：

因为，既然看到了，我就想起了它和defer的区别，好了，接下来，小做笔记吧。

二、区别

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

1、没有 defer 或 async

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

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

2、有 async标志的脚本

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

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

使用async属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。但是不能保证异步脚本按照它们在页面出现的顺序执行。

3、有defer标志的脚本

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

存在defer的情况下，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

一句话总结就是，使用defer属性的可以让脚本在文档完全呈现之后在执行，延迟脚本总是按照指定它们的顺序执行。

4、分析

从实用角度来说呢，首先把所有脚本都丢到 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

以下的这张图是盗用网上的，因为它一眼就能看出两者之间的区别，十分清晰，如有侵权，我立刻删除，十分感谢图的来源segmentfault博客。

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

5、总结

• 1、defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）

• 2、它俩之间的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的

• 3、关于 defer，比起async，它的好处是按照加载顺序执行脚本的。

• 4、async 则没那么乖了，它是一个乱序执行的主，对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。

• 5、仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

• 6、补充一点：

使用noscript元素可以指定在不支持脚本的浏览器中显示替代的内容，但在启用了脚本的情况下，浏览器不会显示noscript元素中的任何内容。

<noscript>
	<p>本页面需要浏览器支持（启动）JavaScript。
</noscript>