defer/async

1  defer属性的作用是，告诉浏览器，等到DOM加载完成后，再执行指定脚本。

浏览器开始解析HTML网页

解析过程中，发现带有defer属性的script标签

浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本

浏览器完成解析HTML网页，此时再执行下载的脚本

2  async属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染。

浏览器开始解析HTML网页

解析过程中，发现带有async属性的script标签

浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本

脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本

脚本执行完毕，浏览器恢复解析HTML网页

 

一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。