为什么Google Chrome控制台先输出2再输出1？（事件循环）

先看这段代码：

Promise.resolve().then(function() {
  Promise.resolve().then(function() {
    console.log('1');
  });
});


Promise.resolve().then(function() {
  console.log('2');
});

原因要从JavaScript的事件循环微任务处理规则说起：

• 浏览器执行完当前宏任务后，会一次性清空当前的微任务队列。
• 如果在处理某个微任务的过程中产生了新的微任务，这个新微任务不会加入当前正在处理的队列，而是被放到下一轮待处理的微任务队列中。

具体执行流程：

1. 初始代码执行时，两个Promise.resolve()会将各自的then回调加入第一轮微任务队列。
2. 当前宏任务执行完毕，开始处理第一轮微任务队列：
   • 先执行第一个then回调：这个回调里新创建的Promise，其then回调会被加入第二轮微任务队列，此时第一轮队列未处理完，暂不处理这个新微任务。
   • 接着执行第一轮队列里的第二个then回调，直接输出2，第一轮微任务队列处理完毕。
3. 第一轮微任务队列清空后，才会处理第二轮微任务队列，执行对应的回调输出1。

这就是控制台先输出2再输出1的原因。

内容的提问来源于stack exchange，提问作者Nikita