script 标签中的 async 和 defer 属性

script标签

如果没有defer和async属性，浏览器在解析html的时候，就会先暂停解析html,先发送网络请求获取该JS脚本的代码内容，然后让JS引擎执行该代码，当代码执行完毕后恢复解析。（它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载）

script标签的defer和async属性

defer 和 async 属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析：区别如下
● 执行顺序：多个带defer属性的标签，按照加载顺序执行；多个带async属性的标签，不能保证加载的顺序。
● 脚本是否并行执行：
○ defer 属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行执行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行。

○ async属性，请求该脚本的网络请求时异步的，不会阻塞浏览器解析HTML,一旦网络请求回来之后，如果此时HTML还没有解析完，浏览器就会暂停解析，先让JS引擎执行代码，执行完毕后再进行解析。如图：

当然，如果在JS脚本请求回来之前，HTML已经解析完毕了，那就没啥问题，立即执行JS代码，如下图所示：

所以async 是不可控的，因为执行时间不确定，你如果在异步JS脚本中获取某个DOM元素，有可能获取到也有可能获取不到。而且如果存在多个async 的时候，它们之间的执行顺序也不确定，完全依赖于网络传输结果，请先到先执行谁。

总结

defer 适合与dom有关联的脚本 异步加载 文档解析完成执行
async 比较适合第三方的脚本 异步加载 立即执行
双方都只适用于外部脚本。