script标签中的async和defer

转载：图解 script 标签中的 async 和 defer 属性 - 掘金

在html页面中通常会出现以下几种script，那他们有什么区别呢？

<script scr='......'></script>
<script scr='......' async></script>
<script scr='......' defer></script>

1. script

浏览器在解析html的时候，如果遇到一个没有任何属性的script标签，就会暂停解析。先发送网络请求，获取该script标签的脚本内容，然后让JS引擎执行该段代码，当代码执行完毕后，再继续解析html。整个过程如下图所示：

 可以看到script阻塞了浏览器对html的解析，如果获取js脚本的请求迟迟得不到相应，或者代码执行时间较长，页面就会有一段时间的空白，用户看不到页面内容，影响用户体验。

2. async script

async表示异步，七牛的页面中，就用了大量的async。

 当浏览器遇到带有async的script标签，浏览器就会异步请求该端代码，不会阻塞浏览器对html的解析，如果该段代码请求成功后，html还没有解析完成，此时html就会暂停解析，等待该段代码执行完毕后，再继续解析html。如下图所示

如果该段代码请求成功后，html已经解析完毕，则不会对html的解析有其他影响，会立即执行该段代码。如下图所示

 所以async是不可控的，因为执行时间不确定。如果异步请求的代码对dom元素有操作，那他有可能获取到改元素，也有可能获取不到该元素。再者，如果页面中有多个async标签，那他们的执行顺序也是不确定的，依赖于此时的网络情况，即谁先到谁执行。

3. defer script

 defer表示延迟，例如掘金的代码中，就有defer

 当浏览器碰到带有defer的script标签时，也会异步请求该script标签，不会阻塞浏览器的解析。当请求回来后，如果此时html还没有完成解析，那会等到html解析完成后，再执行该段代码。如下图

 如果存在多个defer标签，浏览器（IE9及以下除外）会保证他们按照在html中出行的顺序执行，不会破坏js脚本之间的相互依赖关系。

最后，根据上面的分析，不同类型 script 的执行顺序及其是否阻塞解析 HTML 总结如下：