对于defer而言

  • 添加了defer标志位的script标签所加载回来的脚本会在HTML解析完之后，DOMContendLoaded事件发生之前执行。
  • 如果文档中有多个设置了defer标志位的script标签的话，它们会按照在文档出现的顺序来加载和执行的。


对于async而言

  • 添加了async标志位的script标签所加载回来的脚本会紧接着就执行了。
  • 如果文档中有多个设置了async标志位的script标签的话，它们不会按照在文档出现的顺序来加载和执行的，它们都是乱序的主。

总结

从上面两个结论来看，使用了defer和async标志为的script标签所引用的脚本虽然在加载阶段都不会阻塞HTML解析，但是设置了async标志位的script标签还是会在紧接着的执行阶段阻塞了HTML解析。并且由于它是乱序的主，所以它不能满足各个类库在依赖管理方面的需求。

常规script标签，defer标签和async标签的加载和执行过程跟HTML解析过程的关系如下图：
image.png