JS中关于async和defer作用与区别

最新推荐文章于 2024-09-04 07:54:26 发布

baoleilei6

最新推荐文章于 2024-09-04 07:54:26 发布

阅读量2.3k

点赞数 3

本文链接：https://blog.csdn.net/qq_34629352/article/details/106192746

版权

<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

<script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

从实用角度来讲，首先把所有脚本都放置到 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。
由图得知：

defer 和 async 在网络读取（下载）这部分是一样的，都是异步的（相较于 HTML 解析）。
两者的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的。
关于 defer，由图知它是按照加载顺序执行脚本的，这一点要善加利用。
async 则是乱序执行，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。
async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics。

下面来说明一下两者之间的不同：
正常情况下，当浏览器在解析HTML源文件时如果遇到外部的script，那么解析过程会暂停，并发送请求来下载script文件，只有script完全下载并执行后才会继续执行DOM解析。
那么如果一个页面有很多的外链的脚本。放在head中，那么加载脚本的时候就会阻塞页面的渲染，出现空白的现象。在简单的开发环境中可能调整一下js的位置就能解决问题。但是在越来越复杂的开发环境下，如果想调整js脚本的位置可能就要花费大量的时间。所以为了让这种成本降低。可以使用defer属性。
如果一个script加了defer属性，即使放在head里面，它也会在html页面解析完毕之后再去执行，也就是类似于把这个script放在了页面底部。
对于async，这个是html5中新增的属性，它的作用是能够异步的加载和执行脚本，不因为加载脚本而阻塞页面的加载。一旦加载到就会立刻执行。
两者的相同点
加载文件时不阻塞页面渲染。
对于inline的script无效。
使用这两个属性的脚本中不能调用document.write方法。
有脚本的onload的事件回调。
不同点
html4.0中定义了defer，html5.0中定义了async。
async属性的脚本会在下载结束后立刻执行，同时会在window的load事件之前执行，所以就会出现顺序被打乱的情况；defer属性的脚本是在页面解析完成后，按照顺序执行，同时会在document的DOMContentLoaded之前执行。
总体来说，defer和async的主要不同就是defer会保证脚本的顺序，async不保证顺