chaihongjun.me

javascript中的defer和async

对于熟知或者稍微了解javascript的人来说,或多或少的都听过同步加载和异步加载。说到同步加载和异步加载就不得不提及这么两个单词:

defer

async

这两个单词也会时常在一些网站源码出现。defer本身的含义就是推迟,延期,async则是异步的意思。我们来看几个例子:

<script src="script.js"></script>
<script async src="script.js"></script>
<script defer src="script.js"></script>

以上三个都是加载script这个JS文件。

第一条没有defer和async,表示浏览器读取到这段代码的时候会立即加载并执行脚本内的内容。这里的立即也就是不等这个script后面的文档元素加载进来就执行它了。

第二条,只有async,字面意思就是异步的,所以script.js文件肯定是异步加载了。这里的异步其实是同时并行处理的意思。页面加载到这个script.js之后一边加载一边执行这个脚本,然后同时又继续加载之后的文档元素并渲染。

第三条,只有defer,字面意思是延迟,所以script.js肯定是延迟加载?延迟执行?实际defer情况下,也是一种异步加载的方式,只不过不再是同时并行处理。只是script.js的加载和后面的元素加载是同时进行,然后等后面的元素全部加载完毕渲染完毕了,script.js才去做执行。

下面是加载渲染执行时间的对比图:

javascript中的defer和async

蓝色是JS网络下载时间,绿色是JS解析时间,红色是JS执行时间。

从上面可以看到:

  1. 只有defer和async存在并行处理的情况,而且是在资源下载和页面解析的情况下。也就是一边下载页面一边也在解析页面内容。

  2. defer和async的唯一区别是红色部分,执行时间。defer延迟执行,等页面全部加载渲染完了再执行。

  3. async的执行时间是在网络下载完了之后,不管顺序如何,一旦JS下载完了就立即执行。

  4. async不考虑JS之间的依赖关系完全自由独立,典型的例子是谷歌和百度等统计代码。

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»