事件循环原理?

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

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执行的具体流程就是如下：

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

调用栈和任务队列

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

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

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

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

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

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

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

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

promise1

后面又有一个then，在前面提到如果还有microtask就在微队列队尾中加入这个任务，并且在当前tick执行。所以紧接着输出promise2
5. 当前的tick也就完成了，最后在从macroTasks取出task，此时三个队列的状态如下：

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

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