script标签的defer和async属性

1.开始之前先解释一下几个名词

解析：html解析器把html构建成dom树

加载：资源被放入内存

渲染：dom渲染指的是dom树和cssom树生成渲染树，进行布局（计算位置、大小）和显示，并把计算结果传给显卡，让显卡绘制界面。

2.我们一会儿要通过performance.timing的各属性值来看页面的加载、渲染等耗时，先了解下各属性值表示什么。

navigationStart： 同一个浏览器 上一个页面卸载（unload）结束时的时间戳。如果没有上一个页面，这个值会和fetchStart相同

redirectStart： 第一个HTTP重定向开始时的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0

redirectEnd： 最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0

fetchStart： 浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前

domainLookupStart： DNS 域名查询开始的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和fetchStart一致

domainLookupEnd： DNS 域名查询完成的时间。如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等

connectStart：  HTTP（TCP） 域名查询结束的时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 fetchStart一致

connectEnd： HTTP（TCP） 返回浏览器与服务器之间的连接建立时的时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束

requestStart： 返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳

responseStart： 返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间

domLoading： 当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的 readystatechange事件触发时）的时间戳

domInteractive： 当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的时间戳，这个属性被用于测量用户感受的加载网页的速度；如果JS添加了defer属性，表示告诉浏览器，这段JS在domInteractive后执行，一旦执行完defer JS，就会触发domContentLoaded。domInteractive和的时间差取决于JS的下载和执行时间；如果JS属性为async，那么domContentLoaded和domInteractive又几乎没什么区别了，因为js的解析不会阻塞dom，也不阻塞domContentLoad事件。

domContentLoadedEventStart： 当解析器发送DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的时间戳

domContentLoadedEventEnd： 当所有需要立即执行的脚本已经被执行（不论执行顺序）时的时间戳

domComplete： 当前文档解析完成，即Document.readyState 变为 'complete'，且相对应的readystatechange 被触发时的时间戳，异步脚本（如果有）已执行。

loadEventStart： load事件被发送时的时间戳。如果这个事件还未被发送，它的值将会是0

loadEventEnd： 当load事件结束，即UA具有完整的页面，所有资源（图像、css等所有）加载事件完成时的时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0

unloadEventStart： 上一个页面unload事件抛出时的时间戳。如果没有上一个页面，这个值会返回0

unloadEventEnd： 和 unloadEventStart 相对应，unload事件处理完成时的时间戳。如果没有上一个页面,这个值会返回0

2.页面中JS对dom解析、渲染的影响

在浏览器拿到html文件后开始对html进行解析，当遇到内部script，外部script，外部有defer、async属性的script脚本时，html解析、渲染所费时长有什么不同，我们通过下面的代码执行来分析。

①. 先看html中没有script的情况

没有js阻塞的情况下，dom解析只需要3毫秒，白屏时长也只有6毫秒。

②. 再来看看有js（没有defer、async属性）的情况下dom解析时长和白屏时长

上图可以看出文档解析完成时间（domComplete）和dom解析完成时间（domInteractive）是一样的，因为js的执行阻塞了dom解析，dom解析时长花费了4秒多。

③. 下面我们来看看script有defer和async属性的情况下dom解析耗时。

从上图可以看出有defer属性的script脚本时，dom解析时长也只有3毫秒，但domComplete的时长有3秒多近4秒。因为defer不阻塞dom解析，但会阻塞DOMContentLoaded，defer会在DOMContentLoaded事件之前按照顺序执行。

有async属性的script脚本时，可能会阻塞可能不会阻塞dom解析，不好举例，就不举例子了…

总结：

defer 和 async 在下载时是一样的，都是异步的（相较 HTML 解析）。
defer 会在 HTML 解析完成后执行的，async 则是下载完成后执行。
defer 是按照加载顺序执行的，async 是哪个文件先加载完，哪个先执行。
async 在使用的时候，可以用于完全无依赖的脚本，比如百度分析或者 Google Analytics。