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

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

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

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