niehanmin 2020-05-19
大家在平时编译前端代码的时候经常会看到<script>标签里带有defer或者async属性,那么长话简说在这里介绍一下这两个属性的作用。
正常的html加载解析顺序是同步进行的,也就是浏览器加载html成功之后开始解析文档,这个时候如果遇到script文件就会暂停解析html文档,而下载script文件并加以解析,当解析完成后再开始继续解析html文档。
defer是一个异步加载属性,当html解析进程中,遇到带有该属性的script标签,就会异步加载该js文件,而不会中断html文档的解析,当整个html解析完成后,回过头来再解析该js文件。
async也是一个异步加载属性,不同的是,当html解析过程中遇到此属性的js文件,会异步下载该文件而不会停止解析html文档,但是当该文件加载完成,会立即解析,在解析过程中,html文档自身则会暂停解析直到该js文件解析完毕,再继续解析html文档。