频道导航

关于Javascript中defer和async的区别总结

2019-01-06 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了关于Javascript中defer和async的区别总结，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_404_0@

首先来看看这三句话：

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

@H_404_0@有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

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

@H_404_0@下面来进行详解的介绍这二者的区别。

@H_404_0@

一般情况

@H_404_0@按照惯例，所有script元素都应该放在页面的head元素中。这种做法的目的就是把

所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方

。可是，在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容(浏览器在遇到body标签时才开始呈现内容)。

@H_404_0@对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现在

Web应用程序一般都全部JavaScript引用放在body元素中页面的内容后面

。这样一来，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

@H_404_0@这个例子中，虽然我们把script元素放在了文档的head元素中，但其中

包含的脚本将延迟到浏览器遇到标签后再执行

。 HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件(在DOM树构建完成后触发，不需要等到所有的资源都加载完毕)执行。

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

@H_404_0@

最佳实践

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

@H_404_0@属性在浏览器之间表现并不一致。为了避免跨浏览器的差异，可以使用 “lazy loading”的方法，即直到用到该脚本时才加载。

if (window.addEventListener) {
window.addEventListener("load",lazyload,false);
} else if (window.attachEvent) {
window.attachEvent("onload",lazyload);
} else {
window.onload = lazyload;
}

@H_404_0@

async(异步脚本)

@H_404_0@异步脚本：async属性也只适用于外部脚本文件，并告诉浏览器立即下载文件。

@H_404_0@

但与defer不同的是：标记为async的脚本并不保证按照指定它们的先后顺序执行。

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> 异步加载

@H_404_0@这个例子中，test2.js可能会在test1.js之前执行。因此，确保两者之间互不一来非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。因此，建议异步脚本不要在加载期间修改DOM。

@H_404_0@

来看一张更加清晰的图：

@H_404_0@

图解：

蓝色线代表网络读取，红色线代表执行时间，这两个都是针对脚本的；绿色线代表 HTML 解析。

@H_404_0@

通过上图和之前的分析，我们可以得出：

@H_404_0@ 1、defer 和 async 在网络读取（脚本下载）这块儿是一样的，都是异步的（相较于 HTML 解析）

@H_404_0@ 2、两者的差别：在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的。defer是立即下载但延迟执行，加载后续文档元素的过程将和脚本的加载并行进行（异步），但是脚本的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。async是立即下载并执行，加载和渲染后续文档元素的过程将和js脚本的加载与执行并行进行（异步）。

@H_404_0@ 3、关于 defer，我们还要记住的是它是按照加载顺序执行脚本的

@H_404_0@ 4、标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。

@H_404_0@ 5、async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。

@H_404_0@