对于defer而言
- 添加了defer标志位的script标签所加载回来的脚本会在HTML解析完之后,DOMContendLoaded事件发生之前执行。
- 如果文档中有多个设置了defer标志位的script标签的话,它们会按照在文档出现的顺序来加载和执行的。
对于async而言
- 添加了async标志位的script标签所加载回来的脚本会紧接着就执行了。
- 如果文档中有多个设置了async标志位的script标签的话,它们不会按照在文档出现的顺序来加载和执行的,它们都是乱序的主。
总结
从上面两个结论来看,使用了defer和async标志为的script标签所引用的脚本虽然在加载阶段都不会阻塞HTML解析,但是设置了async标志位的script标签还是会在紧接着的执行阶段阻塞了HTML解析。并且由于它是乱序的主,所以它不能满足各个类库在依赖管理方面的需求。
常规script标签,defer标签和async标签的加载和执行过程跟HTML解析过程的关系如下图: