HTML5文档在引入外部javascript脚本时,提供了async和defer两个属性,解决浏览器加载javascript脚本时文档停止解析的问题。
- 默认情况,直接引入js脚本文件,浏览器遇到script标签会停止解析文档,等到加载完成之后才继续解析文档。降低用户体验。
<script type="text/javascript" src="x.min.js"></script>
- async模式,遇到script标签时,使用其他线程去下载脚本,脚本加载完成之后执行脚本。不会阻塞文档解析。
<script type="text/javascript" src="x.min.js" async="async"></script>
- defer模式,遇到script标签时,使用其他线程去下载脚本,但是会在文档解析完成之后才执行脚本。
<script type="text/javascript" src="x.min.js" async="async"></script>
总结:async和defer都是提供异步加载脚本的属性,区别在于是否在文档解析完成之后再执行脚本。async不会等到文档加载完成之后才执行,而defer会等文档解析完成之后执行。