defer/async用法与区别

223 阅读1分钟

我们浏览器解析到脚本的时候就会停下来,去把脚本文件下载回来。

如果是样式脚本则构建css树,js脚本则解析,执行。这样同步的脚本引用会让我们浏览器的白屏时间过长。

所以h5出来两个处理js脚本下载的异步操作。defer/async

此刻按下F12,我们可以看到掘金的引入都是同步的

先看图

图当然是偷的红色执行

defer


文档遇到defer的脚本继续解析。其他线程下载脚本文件,等到文档下载完成后,脚本文件执行

async


文档遇到async的脚本继续解析。其他线程下载脚本文件,下载完成后执行文档

最后注意一波


1. defer脚本按照先后顺序执行。
  1. async不能保证脚本运行的先后。

  2. 都只可以使用在外联脚本

  • 最后,bye!