defer和asyn的区别

defer 和 async 都是不阻塞页面文档解析的前提下，控制脚本的下载和执行。

我们先了解一下页面渲染机制
1 浏览器根据服务器返回的html文档进行从上至下的解析，构建dom
2 在构建dom过程中，如果遇到外联样式或者脚本申明，则会停止构建，创建新的网络去下载外联样式和脚本文件。
3 样式下载完成之后，构建cssdom，脚本下载完成之后，解释执行，然后继续解析并构建dom
4 完成文档解析后，将cssdom和dom树进行关联和映射，最后将视图渲染到浏览器窗口。

在这个过程中我们的脚本下载和文档解析是同步进行的，如果js脚本出现堵塞，那么浏览器将会出现白屏，影响用户体验，所以我们使用defer，async来异步加载js脚本。

defer： 用于开启新的线程下载脚本，并且在文档解析完成之后执行脚本
async： 异步加载js脚本，并且在加载完成之后立即执行