事件循环原理?

Question

通过一道题进入浏览器事件循环原理：

console.log('script start')
setTimeout(function () {
  console.log('setTimeout')
}, 0);
Promise.resolve().then(function () {
  console.log('promise1')
}).then(function () {
  console.log('promise2')
})
console.log('script end')

可以先试一下，手写出执行结果，然后看完这篇文章以后，在运行一下这段代码，看结果和预期是否一样

单线程

定义

单线程意味着所有的任务需要排队，前一个任务结束，才能够执行后一个任务。如果前一个任务耗时很长，后面一个任务不得不一直等着。

原因

javascript 的单线程，与它的用途有关。作为浏览器脚本语言， javascript 的主要用途是与用户互动，以及操作 DOM 。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定 javascript 同时有两个线程，一个在添加 DOM 节点，另外一个是删除 DOM 节点，那浏览器应该应该以哪个为准，如果在增加一个线程进行管理多个线程，虽然解决了问题，但是增加了复杂度，为什么不使用单线程呢，执行有个先后顺序，某个时间只执行单个事件。

为了利用多核 CPU 的计算能力， HTML5 提出 Web Worker 标准，运行 javascript 创建多个线程，但是子线程完全受主线程控制，且不得操作 DOM 。所以，这个标准并没有改变 javascript 单线程的本质

浏览器中的 Event Loop

事件循环这个名字来源于它往往这么实现:

while(queue.waitForMessage()) {
    queue.processNextMessage();
}

这个模型的优势在于它必须处理完一个消息(run to completion),才会处理下一个消息,使程序可追溯性更强。不像 C 语言可能随时从一个线程切换到另一个线程。但是缺点也在于此,若同步代码阻塞则会影响用户交互

macroTask 和 microTask

宏队列， macroTask 也叫 tasks 。包含同步任务，和一些异步任务的回调会依次进入 macro task queue 中， macroTask 包含:

• script 代码块
• setTimeout
• requestAnimationFrame
• I/O
• UI rendering

微队列, microtask ，也叫 jobs 。另外一些异步任务的回调会依次进入 micro task queue ，等待后续被调用，这些异步任务包含:

• Promise.then
• MutationObserver

下面是 Event Loop 的示意图

一段 javascript 执行的具体流程就是如下：

1. 首先执行宏队列中取出第一个，一段 script 就是相当于一个 macrotask ,所以他先会执行同步代码，当遇到例如 setTimeout 的时候，就会把这个异步任务推送到宏队列队尾中。
2. 当前 macrotask 执行完成以后，就会从微队列中取出位于头部的异步任务进行执行，然后微队列中任务的长度减一。
3. 然后继续从微队列中取出任务，直到整个队列中没有任务。如果在执行微队列任务的过程中，又产生了 microtask ，那么会加入整个队列的队尾，也会在当前的周期中执行
4. 当微队列的任务为空了，那么就需要执行下一个 macrotask ，执行完成以后再执行微队列，以此反复。
   总结下来就是不断从 task 队列中按顺序取 task 执行，每执行完一个 task 都会检查 microtask 是否为空，不让过不为空就执行队列中的所有 microtask 。然后在取下一个 task 以此循环

调用栈和任务队列

调用栈是一个栈结构，函数调用会形成一个栈帧。栈帧：调用栈中每个实体被称为栈帧，帧中包含了当前执行函数的参数和局部变量等上下文信息，函数执行完成后，它的执行上下文会从栈中弹出。 下面是调用栈和任务队列的关系:

分析文章开头的题目，可以通过在题目前面添加 debugger ，结合 chrome 的 call stack 进行分析:

这里不知道怎么画动图，在晚上找的一张图，小伙伴们有好的工具，求分享，下面借助三个数组来分析一下这段代码的执行流程， call stack 表示调用栈， macroTasks 表示宏队列， microTasks 表示微队列：

1. 首先代码执行之前都是三个队列都是空的:

callStack: []
macroTasks: [main]
microTasks: []

在前面提到，整个代码块就相当于一个 macroTask ，所以首先向 callStack 中压入 main() ， main 相当于整个代码块

2. 执行 main ，输出同步代码结果:

callStack: [main]
macroTasks: []
microTasks: []

在遇到 setTimeout 和 promise 的时候会向 macroTasks 与 microTasks 中分别推入

3. 此时的三个队列分别是:

callStack: [main]
macroTasks: [setTimeout]
microTasks: [promise]

当这段代码执行完成以后，会输出:

script start
script end

4. 当 main 执行完成以后，会取 microTasks 中的任务，放入 callStack 中，此时的三个队列为:

callStack: [promise]
macroTasks: [setTimeout]
microTask: []

当这个 promise 执行完成后会输出

promise1

后面又有一个 then ，在前面提到如果还有 microtask 就在微队列队尾中加入这个任务，并且在当前 tick 执行。所以紧接着输出 promise2

5. 当前的 tick 也就完成了，最后在从 macroTasks 取出 task ，此时三个队列的状态如下：

callStack: [setTimeout]
macroTasks: []
microTask: []

最后输出的结果就是 setTimeout 。

所谓的事件循环就是从两个队列中不断取出事件，然后执行，反复循环就是事件循环。经过上面的示例，理解起来是不是比较简单。