JavaScript 引擎、事件循环、任务队列

一、先引用别人的一幅图（很好的概括了JS主线程和任务队列是如何执行的）

1.JS引擎和runtime的区别：

• 引擎：解释并编译代码，让它变成能交给机器人运行的代码（runnable commands）；单线程，负责维护任务队列，按照顺序把任务放入函数栈执行。
• runtime：就是运行环境，它提供一些对外的接口供JS调用，比如，浏览器环境、Node.js环境。不同的runtime，会提供不同的接口，比如，在 Node.js 环境中，我们可以通过require来引入模块；而在浏览器中，我们有window、 DOM。图中的异步处理模块就是runtime提供的，拥有与JS引擎互不干扰的线程。
• 总结：JS引擎可以理解为主线程，runtime可以理解为其他的线程。

二、函数栈
现在，我们要运行下面这段代码：

function bar() {
    console.log(1);
}

function foo() {
    console.log(2);
    far();
}

setTimeout(() => {
    console.log(3)
});

foo();

它在栈中的入栈、出栈过程，如下图：

总结：其实函数的入栈出栈就是当主线程调用到某个函数的时候该函数就入栈，使用JS引擎去解析执行这个函数，等到该函数执行完毕之后就会弹出函数栈。

三、任务队列
Js 中，有两类任务队列：宏任务队列（macro tasks）和微任务队列（micro tasks）。宏任务队列可以有多个，微任务队列只有一个（eg:Promise）。

• 宏任务：script（全局任务）, setTimeout, setInterval, setImmediate, I/O, UI rendering.宏任务是在下一轮的事件循环中才会执行
• 微任务：process.nextTick, Promise, Object.observer, MutationObserver.微任务在本轮事件循环中执行
• 执行顺序：主线程 -> 异步任务(微任务 -> 宏任务)

四、浏览器的事件循环
当函数栈为空时，就会从任务队列里面去除任务来执行。浏览器这里，分为三步：

1. 取一个宏任务来执行。执行完毕后，下一步。（每解决一个宏任务都需要一轮的事件循环）
2. 取一个微任务来执行，执行完毕后，再取一个微任务来执行。直到微任务队列为空，执行下一步。（微任务的执行都在同一轮的事件循环中）
3. 更新UI渲染

Event Loop 会无限循环执行上面3步，这就是Event Loop的主要控制逻辑。其中，第3步（更新UI渲染）会根据浏览器的逻辑，决定要不要马上执行更新。毕竟更新UI成本大，所以，一般都会比较长的时间间隔，执行一次更新。

从执行步骤来看，我们发现微任务，受到了特殊待遇！我们代码开始执行都是从script（全局任务）开始，所以，一旦我们的全局任务（属于宏任务）执行完，就马上执行完整个微任务队列。看个例子：

console.log('script start');

// 微任务
Promise.resolve().then(() => {
    console.log('p 1');
});

// 宏任务
setTimeout(() => {
    console.log('setTimeout');
}, 0);

var s = new Date();
while(new Date() - s < 50); // 阻塞50ms

// 微任务
Promise.resolve().then(() => {
    console.log('p 2');
});

console.log('script ent');


/*** output ***/

// one macro task
script start
script ent

// all micro tasks
p 1
p 2

// one macro task again
setTimeout

上面之所以加50ms的阻塞，是因为setTimeout的 delayTime 最少是 4ms. 为了避免认为setTimeout是因为4ms的延迟而后面才被执行的，我们加了50ms阻塞。

五、NodeJs 的 事件循环
NodeJs 的运行是这样的：

• 初始化事件循环
• 执行你的主代码。这里同样，遇到异步处理，就会分配给对应的队列。知道主代码执行完毕。
• 执行主代码中出现的所有微任务：先执行完所有nextTick()，然后在执行其它所有微任务。
• 开始 Event Loop