script标签中async与defer的区别

概述

在script的标签中async与defer有什么区别？

如果没有async或者defer属性的话，那么浏览器会立即同步下载对应的JS的脚本。下载完就立即执行脚本，此时它不会等待目前正在渲染的文档。所以它会阻碍了当前文档的解析

这样肯定是对首屏的加载不太友好，因此在script上加上async或者defer属性，那么它就会异步的去下载对应的JS的脚本，而不会影响当前文档的正常渲染

下面这张图非常清晰的展示了三者的关系，绿色的就是浏览器的解析的时间线，蓝色是网络加载脚本的时间线，红色是脚本解析的时间线

现在我们从执行时机、执行顺序、适用场景、兼容性来展开说说

执行时机

首先从执行时机来看

async

async的下载脚本后就会立即执行，这个下载的过程是不会阻碍页面的渲染。因此它的执行时机是不可预测的，完全取决于脚本的下载速度。哪个先下载完就先加载哪个

defer

而defer也是异步的下载JS的脚本，注意注意，defer下载完脚本不会立即执行，而是等到HTML解析完成之后，并在DOMContentLoaded事件之前解析文档

执行顺序

下面再从执行顺序角度来看看

async

当网页中同时加载多个JS文件都是采用的async标签，那么他们之间的执行顺序是无法掌控的。只取决于下载的速度，那么如果JS脚本之间有依赖关系，那么可能会出错

defer

同样的如果多个带defer标签的JS文件，他们执行的话会按照script在html中出现的前后顺序来执行，这样相对就可控很多

使用场景

我们再使用场景角度再开看一看

async

通过上面的分析，我们很容易得到结论。async适用于那些不依赖页面，也不依赖其他元素，也不依赖其他JS脚本的场景，最典型的就是统计类的JS脚本

比如百度统计

defer

defer就适用那些需要访问页面元素，或者与其他JS脚本存在依赖的场景，其他正常开发中。我们写的99%的JS都适用于defer

浏览器的兼容角度

最后我们从浏览器的兼容角度看看

async

async在比较新的浏览器中支持的好，一些老的浏览器可能存在兼容问题

defer

而defer的兼容性就非常好，即使非常老的浏览器也是能支持