script标签中defer和async属性的区别

　　这篇文章来源于JS高级程序设计第三版中关于script标签的介绍，结合查阅的资料写下的学习笔记。

　　向html页面中插入javascript代码的主要方法就是经过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种便是经过src属性引入外部js文件。因为解释器在解析执行js代码期间会阻塞页面其他部分的渲染，对于存在大量js代码的页面来讲会致使浏览器出现长时间的空白和延迟，为了不这个问题，建议把所有的js引用放在</body>标签以前。

　　script标签存在两个属性，defer和async，所以script标签的使用分为三种状况：

　　1.<script src="example.js"></script>

　　　没有defer或async属性，浏览器会当即加载并执行相应的脚本。也就是说在渲染script标签以后的文档以前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；

　　2.<script async src="example.js"></script>

　　   有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；

　　3.<script defer src="example.js"></script>

         有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行须要等到文档全部元素解析完成以后，DOMContentLoaded事件触发执行以前。

　　下图能够直观的看出三者之间的区别:

 

　　

 

　　其中蓝色表明js脚本网络加载时间，红色表明js脚本执行时间，绿色表明html解析。

　　从图中咱们能够明确一下几点：

　　1.defer和async在网络加载过程是一致的，都是异步执行的；

　　2.二者的区别在于脚本加载完成以后什么时候执行，能够看出defer更符合大多数场景对应用脚本加载和执行的要求；

　　3.若是存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是牢牢挨着的，不管声明顺序如何，只要加载完成就马上执行，它对于应用脚本用处不大，由于它彻底不考虑依赖。