defer和async异同

为了加快html内容的解析,一个很好的加载script的原则是把script加载放在</body>前。但其实存在影响script加载的属性:defer 和 async。下面引用一张图:
script加载比较 从其他资料来看,该图只是理想情况,因为具体的浏览器有不同的实现方式。但在这里,可以从概念上理解这两个属性。

  1. 不加任何属性的script,会打断html的解析,加载并执行脚本,然后继续html解析
  2. 添加defer后,在html解析的同时加载,在html解析结束后执行脚本
  3. 添加async后,在html解析的同时加载,加载完成后执行脚本,再继续html解析

因此:

  1. async无法控制script加载的顺序,如果脚本文件有依赖的情形,慎用async
  2. defer可以控制script加载的顺序,因为是顺序执行的
  3. 对于需要加载页面然后通过脚本渲染内容的,推荐 defer

另外,async和defer同时使用,主要是为了浏览器的兼容性。

参考链接

defer和async的区别
浅谈script标签的defer和async