Script 标签中 defer 和 async 的区别?

70 阅读1分钟

1、在解析HTML时,如果遇到需要加载script标签的情况,会先阻碍HTML的解析,然后开始下载script脚本,下载完成后再执行脚本,执行完后再继续解析HTML。

<script src=''></script>

image.png 2、在解析HTML时,如果遇到需要加载script标签的情况,会在解析HTML的同时异步下载script脚本。下载完成后,如果HTML还没解析完成,则会阻碍HTML的解析,开始执行script脚本,执行完后再继续解析HTML。

<script src='' async></script>

image.png

image.png 3、在解析HTML时,如果遇到需要加载script标签的情况,会在解析HTML的同时异步下载script脚本。下载完成后,script脚本会在HTML解析完成后再继续执行,不会阻碍HTML的解析。

<script src='' defer></script>

image.png