浏览器中的 Event Loop

什么是执行栈？

可以把执行栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。
当开始执行 JS 代码时，首先会执行一个 main 函数，然后执行我们的代码。根据先进后出的原则，后执行的函数会先弹出栈，在图中我们也可以发现，foo 函数后执行，当执行完毕后就从栈中弹出了。

平时在开发中，大家也可以在报错中找到执行栈的痕迹

    function foo() {
      throw new Error('error')
    }
    function bar() {
      foo()
    }
    bar()

大家可以在上图清晰的看到报错在 foo 函数，foo 函数又是在 bar 函数中调用的。

浏览器中的 Event Loop

我们执行 JS 代码的时候其实就是往执行栈中放入函数，那么遇到异步代码的时候该怎么办？其实当遇到异步的代码时，会被挂起并在需要执行的时候加入到 Task（有多种 Task） 队列中。一旦执行栈为空，Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说 JS 中的异步还是同步行为。

Event-loop 是如何工作的？

setTimeout(()=>{
    console.log("setTimeout1");
    Promise.resolve().then(data => {
        console.log(222);
    });
});
setTimeout(()=>{
    console.log("setTimeout2");
});
Promise.resolve().then(data=>{
    console.log(111);
});

运行结果为:

111
setTimeout1
222
setTimeout2

JS引擎是如何执行这段代码的:

1. 主线程上没有需要执行的代码
2. 接着遇到setTimeout 0，它的作用是在 0ms 后将回调函数放到宏任务队列中(这个任务在下一次的事件循环中执行)。
3. 接着遇到setTimeout 0，它的作用是在 0ms 后将回调函数放到宏任务队列中(这个任务在再下一次的事件循环中执行)。
4. 首先检查微任务队列, 即 microtask队列，发现此队列不为空，执行第一个promise的then回调，输出 ‘111’。
5. 此时microtask队列为空，进入下一个事件循环, 检查宏任务队列，发现有 setTimeout的回调函数，立即执行回调函数输出 ‘setTimeout1’,检查microtask 队列，发现队列不为空，执行promise的then回调，输出’222’，microtask队列为空，进入下一个事件循环。
6. 检查宏任务队列，发现有 setTimeout的回调函数, 立即执行回调函数输出’setTimeout2’。

所以 Event Loop 执行顺序如下所示：

1. 首先执行同步代码，这属于宏任务
2. 当执行完所有同步代码后，执行栈为空，查询是否有异步代码需要执行
   执行所有微任务
3. 当执行完所有微任务后，如有必要会渲染页面
4. 然后开始下一轮 Event Loop，执行宏任务中的异步代码，也就是 setTimeout 中的回调函数
5. 所以以上代码虽然 setTimeout 写在 Promise 之前，但是因为 Promise 属于微任务而 setTimeout 属于宏任务，所以会有以上的打印。

微任务包括

process.nextTick ，promise ，MutationObserver。

宏任务包括

script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。

这里很多人会有个误区，认为微任务快于宏任务，其实是错误的。因为宏任务中包括了 script ，浏览器会先执行一个宏任务，接下来有异步代码的话才会先执行微任务。