1分钟了解 JavaScript EventLoop

Event Loop

Event Loop 是一个程序结构，用于等待和发送消息和事件。

Event Loop 执行顺序如下所示：

• 首先执行同步代码（宏任务）
• 当执行完所有同步代码后，调用栈为空，查询是否有异步代码（消息队列）需要执行
• 执行所有微任务
• 当执行完所有微任务后，如有必要会渲染页面
• 然后开始下一轮 Event Loop，执行宏任务中的异步代码，也就是 setTimeout 中的回调函数

宏任务

script、setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有IE10支持）、I/O、UI Rendering。

微任务

Process.nextTick（node）、Promise、MutationObserver

调用栈

JavaScript执行过程中会产生执行栈，如果调用栈执行到新的宏任务时，会将宏任务里面的代码会添加到当前的消息队列里面。如果调用栈执行到微任务时，会将微任务添加到微任务队列中。

消息队列

存放异步消息的地方，当调用栈为空时，会取队首消息继续执行。

微任务队列

微任务会在调用栈被清空的时候，在下次消息执行之前立即执行，并且在处理微任务的时候新加入的微任务也会被一起执行。

举个例子：

// 调用环境即script
setTimeout(function () {
  console.log("set1");
  new Promise(function (resolve) {
    resolve();
  }).then(function () {
    new Promise(function (resolve) {
      resolve();
    }).then(function () {
      console.log("then4");
    });
    console.log("then2 ");
  });
});

new Promise(function (resolve) {
  console.log("pr1");
  resolve();
}).then(function () {
  console.log("then1");
});

setTimeout(function () {
  console.log("set2");
});

console.log(2);

new Promise(function (resolve) {
  resolve();
}).then(function () {
  console.log("then3");
});

1. 调用栈执行到setTimeout ,将setTimeout 内容放到消息队列中；
2. 执行到16行promise，打印pr1，执行resolve()，然后将then中的内容放到微任务队列中；
3. 执行到23行，将setTimeout放入到消息队列中，排在第2行setTimeout后面；
4. 执行到27行，打印2；
5. 执行29行promise，将then中的内容放进微任务队列中；
6. 此时当前任务的调用栈已经为空，所以顺序执行微任务队列，即第2步中，打印then1,then3
7. 此时微任务也执行完毕，会从消息队列里取出下一个宏任务，即是第1步中setTimeout，打印set1，然后执行promise，将then放进微任务队列中；
8. 此时第二轮调用栈也执行完毕，会执行微任务队列中的任务，然后执行promise，执行到then会将代码又放进微任务队列中，即打印then2，微任务队列中还有任务会继续执行，打印then4；
9. 最后执行到消息队列中的剩下的任务，即23行setTimeout，打印set2

即最后打印结果为

pr1、2、then1、then3、set1、then2、then4、set2