JS中async和defer的区别
2017-07-20 本文已影响81人
jazenye
《JavaScript高级语言程序设计》里P13-14简单介绍过这两个标签属性的区别。但是不是很清楚，所以在查阅部分资料之后决定再整理一下。
HTML4.01为<script>标签定义了defer属性，设置这个属性相当于告诉浏览器立即下载，但延迟执行。（延迟脚本）
HTML5为<script>元素定义了async属性。这个属性与defers属性相似，都用于改变处理脚本的行为。同样，与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照它们指定的先后顺序执行。（异步脚本）
-
script：当浏览器遇到<script>时，文档解析停止，立即下载并执行脚本，当脚本执行完毕后再继续解析文档。 -
defer script：当浏览器遇到<script>时，JS的加载不会阻塞页面的渲染和资源的加载。其他线程将下载脚本，等到文档解析完成，脚本才会执行。 -
async script：当浏览器遇到<script>标签时，和defer一样，会等待的资源不会阻塞其余资源的加载，也不会影响页面的加载。但是在有async的情况下，JS下载完毕后就会立即执行，所以脚本执行顺序可能与预期不一致。对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说使用 async可以是非常合适的。
从实用角度来说呢，把所有脚本都丢到
</body>之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。
script加载过程
从上面这张图也可以看出这个script的加载过程，其中defer和async的加载过程是一致的，但是两个属性在执行时有所差别。
