脚本引用中的defer和async的用法和区别

　　以前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer、async，没有细说，这里展开一下，谈谈它们的做用和区别，先上张图来个针对没用过的小伙伴有个初始印象：

　　是的，就是在页面脚本引用的时候设置defer或者async，为何会有这两个属相来辅助脚本加载那，由于浏览器在遇到script标签的时候，文档的解析会中止，再也不构建document，有时打开一个网页上会出现空白一段时间，浏览器显示是刷新请求状态(也就是一直转圈)，这就会给用户很很差的体验，defer和async的合理使用就能够避免这个状况，并且一般script的位置建议写在页面底部(移动端应用的比较多，这两个都是html5中的新属性)。

　　因此相对于默认的script引用，这里配合defer和async就有两种新的用法，它们之间什么区别那？

　　1.默认引用 script:<script type="text/javascript" src="x.min.js"></script>

　　当浏览器遇到 script 标签时，文档的解析将中止，并当即下载并执行脚本，脚本执行完毕后将继续解析文档。

 

　　2.async模式 <script type="text/javascript" src="x.min.js" async="async"></script>

　　当浏览器遇到 script 标签时，文档的解析不会中止，其余线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程当中文档将中止解析，直到脚本执行完毕。

 

　　3.defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>

　　当浏览器遇到 script 标签时，文档的解析不会中止，其余线程将下载脚本，待到文档解析完成，脚本才会执行。

 

　　因此async和defer的最主要的区别就是async是异步下载并当即执行，而后文档继续解析，defer是异步加载后解析文档，而后再执行脚本，这样提及来是否是理解了一点了；

　　它们的核心功能就是异步，那么两种属性怎么去区分什么状况下用哪一个那，主要的参考是若是脚本不依赖于任何脚本，并不被任何脚本依赖，那么则使用 defer，若是脚本是模块化的，不依赖于任何脚本，那么则使用 async；主要功能点说完了，小伙伴们有没有分清楚他们的区别了那。

 

　　原文地址：脚本引用中的defer和async的用法和区别，薛陈磊 | Share the world