前端面试题八股文defer和async

3、defer和async
参考博文：

https://blog.csdn.net/weixin_42561383/article/details/86564715

默认情况下，浏览器是同步加载js脚本的，即渲染引擎遇到 script标签就会停下来，等执行完脚本，再去继续向下渲染，如果是外部脚本，还必须加入脚本的下载时间。

加入脚本的很多而且体积很大的话，下载和 执行 就会占用很大的时间，照成浏览器堵塞，用户就会感觉卡死了，没有任何响应，体验极差，所以浏览器允许脚本的异步加载，方式如下：

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

关键字就是defer和async，脚本会异步加载。渲染引擎遇到这行命令就会开始下载外部的脚本，但是并不会等待其脚本下载完成和执行完成，而是直接执行后面的命令。

defer和async的区别：

defer：需要等待整个页面正常DOM渲染完成后，才会执行下载好的js脚本，并且是按下载完后的顺序执行。

async：当外部的js脚本下载完成后，渲染引擎会暂停DOM渲染，开始执行下载好的JS脚本的内容，在执行完成后，再去渲染。

简单的说：

defer是需要等DOM元素都渲染完成后，才去执行下载完成的js脚本

async是当js脚本下载完成后，开始执行的时候中断DOM渲染，执行js脚本的内容，执行完成再去渲染DOM元素

没有defer或async属性，浏览器会立即下载并执行相应的脚本，并且在下载和执行时页面的处理会停止。可能形成页面堵塞