Javascript中延迟和异步的区别总结

我们先来看看这三句话：

脚本src=' http : script . js '/该脚本没有延迟或异步，因此浏览器将立即加载并执行指定的脚本。“立即”是指在渲染脚本标签下的文档元素之前，也就是说，加载并执行文档元素，而不需要等待后续的加载。

script async src=' http : script.js '/script具有async，后续文档元素的加载和呈现过程将与script . js的加载和执行并行进行(异步)。

script defender src=' http : myscript.js '/script有一个defender，加载后续文档元素的过程将与script.js的加载并行(异步)，但script . js的执行将在所有元素解析完成后，触发DOMContentLoaded事件前完成。

下面详细介绍两者的区别。

一般情况

按照惯例，所有脚本元素都应该放在页面的head元素中。这种方法的目的是将外部文件(CSS文件和JavaScript文件)的所有引用放在同一个地方。但是，在文档的head元素中包含所有的JavaScript文件意味着，在下载、解析和执行所有的JavaScript代码之前，无法呈现页面的内容(浏览器在满足body标签之前不会呈现内容)。

对于那些需要大量JavaScript代码的页面，这无疑会导致浏览器呈现页面时出现明显的延迟，延迟期间浏览器窗口会是空白的。为了避免这个问题，Web应用程序现在通常将所有的JavaScript引用放在body元素中页面内容的后面。这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而且用户会觉得打开页面的速度加快了，因为浏览器窗口显示空白页的时间缩短了。

！doctype html head metharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title/title/headlebodyscript type=' text/JavaScript ' src=' http 3360 script . js '/script/body/html defer(延迟

延迟脚本：延迟属性仅适用于外部脚本文件。

如果为脚本标记定义了defer属性，则该属性的功能是显示脚本在执行时不会影响页面构造。也就是说，脚本将被延迟，直到整个页面被解析。因此，如果在script元素中设置了delay属性，这相当于告诉浏览器立即下载，但延迟执行。

示例：

！doctype html head metharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title script defer type=' text/在这个JavaScript ' src=' http : test . js '/script/head dy/body/html的示例中，虽然我们将script元素放在文档的head元素中，但其中包含的脚本将被延迟，直到浏览器遇到/html标记。HTML5规范要求脚本按照出现的顺序执行，因此第一个延迟的脚本将在第二个延迟的脚本之前执行，这两个脚本将在DOMContentLoaded事件之前执行(在DOM树构建后触发，不需要等待所有资源都被加载)。

特别注意：实际上，延迟脚本可能不会按顺序执行，也可能不会在触发DOMContentLoaded事件之前执行，因此最好只包含一个延迟脚本。

使用defer，加载后续文档元素的过程将与script.js的加载并行(异步)，但是script.js的执行将在所有元素被解析之后，并且在触发DOMContentLoaded事件之前完成。

最佳实践

从实用的角度来看，最好将所有脚本放在/body之前，因为这是旧浏览器唯一的优化选择，并且这种方法可以确保所有其他不是脚本的元素都可以尽快加载和解析。

* *注意：*在不同浏览器之间，* * *延迟属性的行为不一致。为了避免跨浏览器的差异，可以使用“惰性加载”的方法，也就是说，脚本在使用之前不会被加载。

函数lazy load(){ var elem=document . create element(' script ')；elem . type=' text/JavaScript '；elem.async=真；elem . src=' script . js '；document . body . appendchild(elem)；} if(window . addeventlistener){ window . addeventlistener(' load '，lazyload，false)；} else if(window . attachevent){ window . attachevent(' on load '，lazy load)；} else { window.onload=lazyload}异步(异步脚本)

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

但是，与延期不同，标记为异步的脚本不能保证按照指定的顺序执行。

！doctype html head metharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' titlescriptasync type=' text/JavaScript ' src=' http 3360 test1 . js '/script script async type=' text/JavaScript ' src=' http 3360 test2.js '/script/head dy/body/html在本例中，test 2 . js可能在test1.js之前执行。因此，确保两者没有区别是非常重要的。指定async属性的目的是防止页面等待两个脚本下载并执行，从而异步加载页面的其他内容。因此，建议异步脚本在加载过程中不要修改DOM。

看一张更清晰的图片：

说明：蓝线代表网络阅读，红线代表执行时间，都是针对脚本的；绿线代表HTML解析。

通过上图和前面的分析，我们可以得出以下结论：

1.延迟和异步在网络读取(脚本下载)中是相同的，并且两者都是异步的(与HTML解析相比)

2.两者的区别在于下载后脚本执行的时间。显然，defer最接近我们对应用程序脚本加载和执行的要求。立即延迟下载，但延迟执行。加载后续文档元素的过程将与脚本的加载并行(异步)，但是脚本的执行将在所有元素都被解析之后，并且在触发DOMContentLoaded事件之前完成。Async立即下载并执行，加载和呈现后续文档元素的过程将与js脚本的加载和执行并行(异步)。

3.关于defer，我们还应该记住它以加载顺序执行脚本

4.标记为异步的脚本不能保证按照指定的顺序执行。对于它来说，脚本的加载和执行是密切相关的，所以不管你声明什么顺序，一加载就执行。

5.async对于应用程序脚本来说用处不大，因为它根本不考虑依赖性(即使它是以最低的顺序执行的)，但是它非常适合那些不能依赖于任何脚本或者不依赖于任何脚本的脚本。

摘要

以上就是js中延迟和异步的区别。文章很详细，希望能给大家的学习或工作带来一些帮助。有问题可以留言交流。