在 script 标签上使用 defer 和 async 的区别

·  阅读 149

script标签存在两个属性,defer和async,因此script标签的使用分为三种情况:

<script src="example.js"></script>
复制代码
  • 没有defer或async属性,浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前,不等待后续加载的文档元素,读到就开始加载和执行,此举会阻塞后续文档的加载;
<script async src="example.js"></script>
复制代码
  • 有了async属性,表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的,即异步执行;
<script defer src="example.js"></script>
复制代码
  • 有了defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本的执行需要等到文档所有元素解析完成之后,DOMContentLoaded事件触发执行之前。

image.png 其中蓝色代表js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析。

  从图中我们可以明确一下几点:

  1.defer和async在网络加载过程是一致的,都是异步执行的;

  2.两者的区别在于脚本加载完成之后何时执行,可以看出defer更符合大多数场景对应用脚本加载和执行的要求;

  3.如果存在多个有defer属性的脚本,那么它们是按照加载顺序执行脚本的;而对于async,它的加载和执行是紧紧挨着的,无论声明顺序如何,只要加载完成就立刻执行,它对于应用脚本用处不大,因为它完全不考虑依赖。

分类:
前端