＜script＞标签中defer和async的作用和区别

简介：defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。

先了解一下页面的加载和渲染过程：
1. 浏览器通过HTTP协议请求服务器，获取HMTL文档并开始从上到下解析，构建DOM；
2. 在构建DOM过程中，如果遇到外联的样式声明和脚本声明，则暂停文档解析，创建新的网络连接，并开始下载样式文件和脚本文件；
3. 样式文件下载完成后，构建CSSDOM；脚本文件下载完成后，解释并执行，然后继续解析文档构建DOM
4. 完成文档解析后，将DOM和CSSDOM进行关联和映射，最后将视图渲染到浏览器窗口
在这个过程中，脚本文件的下载和执行是与文档解析同步进行，也就是说，它会阻塞文档的解析，如果控制得不好，在用户体验上就会造成一定程度的影响。

defer和async的作用：
defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
async：HTML5新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码。

HTML解析顺序图片解释：

script：同步执行 。如果遇到script标签就暂停html的解析，去下载并执行script标签文件。会阻塞页面解析渲染。

script+async：异步下载 同步执行。在html解析的过程中有async的script标签，就异步加载。开启新的线程，用于下载script文件。但是script文件的执行是同步的，执行的过程仍然会阻塞html的解析渲染。

关于async，也需要注意以下几点：
1. 只适用于外联脚本，这一点和defer一致
2. 如果有多个声明了async的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序
3. async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序

 script+defer：异步加载 延后执行。和async一样，script引用的外部文件是异步加载的，但是defer会将外部文件的执行推迟到html解析结束后再执行。

关于defer我们需要注意下面几点：
1. defer只适用于外联脚本，如果script标签没有指定src属性，只是内联脚本，不要使用defer
2. 如果有多个声明了defer的脚本，则会按顺序下载和执行
3. defer脚本会在DOMContentLoaded和load事件之前执行

总结：

1.defer和async在网络读取（下载）这一阶段是一样的，相对于html解析来说都是异步的。
2.两者之间的差别是script脚本下载完后何时执行。defer是最接近我们对于应用脚本加载和执行要求的。
3.对async而言，脚本的加载和执行是紧挨着的，不管声明顺序如何，只要加载完就会立即执行
4.async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的