script标签的defer和async的区别
本文由 小茗同学 发表于 2018-05-09 浏览(176)
最后修改 2020-01-03 标签:javascript

正文

网上很多写法都有点问题或者难以理解,下面这一张图说明所有问题:

补充说明:

  1. defer 和 async 在下载这块儿是一样的,相较于HTML解析都是异步的;
  2. 它俩的差别在于脚本下载完之后何时执行,async什么时候下载完什么时候执行,并且会中断HTML解析,defer则在HTML解析完成之后,DOMContentLoaded 事件触发之前执行。
  3. async只能用于对其它JS没有任何依赖的场合,比如统计脚本。

没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

参考

https://segmentfault.com/q/1010000000640869