Script标签async和defer

[YBFACC]

Script标签async和defer

async ：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。 defer ：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。

引用来自《JavaScript高级程序设计(第3版) 》

原图链接https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

放在head中不使用async和defer

会等待所有资源下载完毕，并按照脚本的顺序进行执行

放在body底部

常见的方式

放在head中使用async

会异步下载脚本，不会影响页面的解析。并且执行时，不会按照脚本的顺序而是谁先下载完谁先执行。

放在head中使用defer

异步下载脚本，在文档渲染完之后，在 DOMContentLoaded时间触发前，按照脚本的顺序进行执行

放在head中同时使用async和defer

表现与只使用async相同。

参考

defer和async的区别

浅谈script标签的defer和async