关于 script 标签 async 和 defer 属性分析

前言

async 和 defer 是高程第二章的两个概念，印象里没有主动用过这俩属性，特别是写 SPA 之后，更没什么合适机会操作 script 标签。

文字很难表述两者间的差异，至少我是这么认为，网上有张图很不错，可以用来解释这两个属性间的差异。

正文

当不加 aysnc 和 defer 时

• 在解析 HTML 的过程中

• 如果遇到 script 标签

• 浏览器将暂停解析 HTML

• 开始下载script 标签里的内容

• 待下载完成后，立即执行 script 标签里的内容

• 执行完毕后，再去解析 HTML 标签

当使用 async 属性时

• 在解析 HTML 的过程中

• 如果遇到 script 标签

• 解析 HTML 将和下载script 标签的内容同时进行

• 当此 script 标签下载完成后

• HTML 将停止解析，转而执行此 script 标签的内容

• 执行完毕后，再去解析 HTML 标签

当使用 defer 属性时

• 在解析 HTML 的过程中

• 如果遇到 script 标签

• 解析 HTML 将和下载script 标签的内容同时进行

• 当 script 标签下载完成后

• 仍然等到 HTML 全部解析完毕

• 再去执行此 script 标签的内容

思考

高程上说当多个 script 都有 defer 属性时，最后会按顺序执行，但实际上不一定；而 async 肯定不一定按顺序执行。

现实场景中可以说 100%都把 script 标签扔到 body 的最后，也就是最后下载，最后执行，在引入三方插件时倒是经常用到，比如：

• Twitter share button

• Google Analytics

• LiveRe / Disqus

这些的一个特点都是以动态创建 script 标签的形式来引入外部 js，类似于 JSONP，而内容上都是和项目整体关联不大的模块。

补充

平成 31 年 1 月 2 日做下补充，无论是 defer 还是 async，都只对外部脚本有效。

最后

以上、よろしく。