HTML5 <script>标签中的async和defer

柔情只为你懂 2022-07-19 02:24 201阅读 0赞

在HTML中执行脚本最重要的方法就是使用`<script>`元素，但是执行`<script>`元素时会阻塞后面文档的加载，为了解决这个问题HTML5为`<script>`元素添加了`async`和`defer`属性。

## 一、浏览器加载到`<script>`元素，没有设置async或者defer ##

浏览器执行到这个元素的时候会立即下载src所指向的脚本并且执行，在执行完该脚本以后再加载这个`<script>`元素后面的文档。

## 二、当浏览器执行到`<script>`元素，元素设置了async属性 ##

当浏览器解析到这个`<script>`元素的时候，会立即下载该脚本，但是不糊阻塞页面中的其他操作，比如其他脚本的加载和页面的渲染。加载和渲染后续文档的过程和加载`main.js`并行执行（异步）。

`async`不能保证按照脚本出现的先后顺序执行，所以，确保该脚本和其他文档的相互依赖关系非常重要，指定`async`的目的是让页面不用等待这个脚本加载完毕以后再继续下一步操作，让指定`async`的脚本和后续文档异步执行，所以设置异步加载的脚本最好不要操作DOM，因为不知道他什么时候执行，容易产生错误。

`async`脚本会在页面的load事件之前执行，但是不一定在`DOMContentLoaded`事件之前执行，有可能在这个事件之前或者之后执行。支持`async`的浏览器有：Firefox 3.6、Safari 5 和Chrome。

## 三、当浏览器解析到`<script>`，元素设置了defer属性 ##

当元素加载到`<script>`元素，该元素设置了`defer`时，会立即下载该脚本，但是会延迟执行，加载后续文档的过程会和该脚本并行进行（异步），它会在所有文档解析之后，在`DOMContentLoaded`事件执行之前完成。和`async`不同的还有一点是设置了`defer`的脚本会按照它出现在HTML页面中的顺序执行。

## 四、总结 ##

从实际角度出发，还是把`<script>`放在body的底部比较合适，对于比较旧的浏览器这是最好的优化方式，并且能够保证非脚本的文档以最快的速度解析。

下面来看一张图：  
![script][]  
上图中，绿色代表HTML文档解析；  
蓝色代表网路读取，红色代表执行时间，这两个是针对脚本的。

从上图中我们可以得出以下几点总结：

1.  `async`和`defer`在网络读取这一部分是一样的，即下载脚本的时候都是异步的。
2.  `async`和`defer`很明显的差别在于执行时间不同，`async`在加载完之后就执行，而`defer`是在页面解析之后执行，显然`defer`更接近我们对于脚本执行的要求。
3.  关于`defer`，图中没有表现出来的是`defer`是按照顺序执行脚本的。
4.  关于`defer` ，并不能保证执行的顺序，它加载和执行是紧紧挨着的，加载完后就立即执行，不管你声明的顺序如何，都不知道它是什么时候执行的。
5.  因为`async`不能保证脚本执行的顺序，所以要设置async的脚本一定要和其他脚本没有依赖关系，并且不操作DOM。

[script]: /images/20220718/8b18255ce6b642839941e933579affe8.png