JS中的事件循环和任务队列 _JS

JS引擎（The JAVAScript Engine）JavaScript引擎的一个流行示例是google的V8引擎。V8引擎被用在了Chrome和Nodejs里。

文章插图

运行时（The Runtime）浏览器中有很多几乎每个开发都调用过的API ，比如 setTimeout等，但引擎不提供这些API 。

文章插图

JS是单线程的并发语言，这就意味着，在一个时间段内，它只能处理一项任务或执行一段代码。它有一个单一的调用栈（Single Call Stack），和堆（Heap）,队列（Queue）组成的JS并发模型（Javascript Concurrentcy Model）.

文章插图

[可视化表示]
1. 调用栈(Call Stack): 在程序中，它是一个记录程序调用的数据结构。每个数据结构，也可称为栈帧。
来看一下MDN上的例子：

function foo(b) {var a = 5;return a * b + 10;}function bar(x) {var y = 3;return foo(x * y);}console.log(bar(6)); // 返回 100

当调用 bar 时，创建了第一个帧，帧中包含了 bar 的参数和局部变量。当 bar 调用 foo 时，第二个帧就被创建，并被压到第一个帧之上，帧中包含了 foo 的参数和局部变量。当 foo 返回时，最上层的帧就被弹出栈（剩下 bar 函数的调用帧）。当 bar 返回的时候，栈就空了。
再加一张动态图:

文章插图

我们有时会在浏览器的控制台看到长长的红色错误堆栈跟踪，它基本上指示了当前调用堆栈的状态，以及该函数在堆栈中从上到下失败的方式。
function foo(){throw new Error("Oops!");}function bar(){foo();}function baz() {bar();}baz();

文章插图

[Chrome浏览器]
有时，我们进入函数的无限循环，也会抛出错误。在Chrome中，栈里的最大深度为16,000 。

文章插图

2.堆（Heap）:对象被分配在一个堆中，即用以表示一大块非结构化的内存区域。
3.队列（Queue）:一个 JavaScript 运行时包含了一个待处理的消息队列。每一个消息都关联着一个用以处理这个消息的函数。
在事件循环期间的某个时刻，运行时从最先进入队列的消息开始处理队列中的消息。为此，这个消息会被移出队列，并作为输入参数调用与之关联的函数。正如前面所提到的，调用一个函数总是会为其创造一个新的栈帧。
函数的处理会一直进行到执行栈再次为空为止；然后事件循环将会处理队列中的下一个消息（如果还有的话）。
Event Loop基本上，当我们评估 JS 代码的性能时，堆栈中的函数会使其速度慢或快，但执行d成千上万次迭代，或使用或执行超过数百万行代码的文件，速度将变慢，而且会保持堆栈占用或阻止。这样的代码或文件称为阻止脚本（Blocking script）.
网络请求可能很慢，图片请求可能很慢，但幸运的是，服务器请求可以通过 AJAX（异步函数）来完成。我们假设，这些网络请求是通过同步函数进行的，那么会发生什么？网络请求发送到某些服务器，不能就是另一台在某处的计算机。现在，计算机发送回响应的速度可能会很慢。同时，如果我单击某个 CTA 按钮，或者需要执行一些其他渲染，则堆栈被阻止时不会执行任何操作。在多线程语言（如 Ruby）中，可以处理它，但在 Javascript 等单线程语言中，除非堆栈中的函数返回值，否则这是不可能的。网页将崩溃，因为浏览器不能做任何事情。如果我们想要最终用户的流畅 UI ，这不是理想的选择。我们如何处理？
最简单的解决方案是使用异步回调，这意味着我们运行代码的某些部分，并给它一个回调（函数），稍后将被执行。我们都一定遇到异步回调，就像使用Node的任何AJAX请求一样，都是关于异步函数执行的。所有这些异步回调不会立即运行，将会在稍后运行，因此不能立即推送到堆栈内，不像同步函数，如它们到底去哪里，它们如何处理？ $.get(),setTimeout(),setInterval(), Promises, etc. `console.log(), mathematical operations.`