为何链式Promise后排队的微任务优先于后续链式回调执行？

测试queueMicrotask()时，对微任务回调的优先级逻辑产生疑惑，以下是两组对比实验：

实验一：链式Promise与queueMicrotask共存 #

测试代码 #

function tasksAndMicroTasks() {
  const promise = Promise.resolve()

  console.log('#1st call')

  promise
    .then(() => console.log('#3rd call'))
    .then(() => console.log('#4th call'))
    .then(() => console.log('#5th call'))
  
  queueMicrotask(() => console.log(`I'm microtask from the custom Queue`))
  

  console.log('#2nd call')
}
tasksAndMicroTasks()

输出结果 #

#1st call
#2nd call
#3rd call
I'm microtask from the custom Queue
#4th call
#5th call

实验二：拆分Promise链式调用 #

测试代码 #

function tasksAndMicroTasks() {
  const promise = Promise.resolve()

  console.log('#1st call')

  promise
    .then(() => console.log('#3rd call'))

  promise  
    .then(() => console.log('#4th call'))
    .then(() => console.log('#5th call'))
  
  queueMicrotask(() => console.log(`I'm microtask from the custom Queue`))
  
  console.log('#2nd call')
}
tasksAndMicroTasks()

输出结果 #

#1st call
#2nd call
#3rd call
#4th call
I'm microtask from the custom Queue
#5th call

疑问与解答 #

根据实验结果推测：链式Promise的后续回调优先级低于首个Promise解析后的回调，且排在queueMicrotask()注册的任务之后。针对核心疑问解答如下：

1. 执行上下文栈如何处理链式Promise？ #

执行上下文栈的核心逻辑是：先清空所有同步代码的执行栈，再批量处理微任务队列。

对于链式Promise：

• 每个.then()都会返回一个全新的Promise实例，而非复用原Promise。
• 当前一个.then()的回调执行完毕并返回结果后，这个新Promise才会被标记为resolved，它的回调才会被加入微任务队列。
• 每个微任务执行时，会先将自身的执行上下文压入栈，执行完成后弹出，再继续处理队列中的下一个任务。

2. 为何链式回调与首个.then()注册的回调存在差异？ #

本质差异在于微任务的入队时机：

• 首个.then()：基于已resolve的原Promise，会在同步代码阶段直接被加入微任务队列。
• 链式后续.then()：必须等前一个.then()的回调执行完毕、对应的新Promise被resolve后，才会被加入微任务队列，入队时机晚于同步阶段注册的queueMicrotask任务。

实验一执行流程拆解

1. 同步代码执行：输出#1st call → 首个.then()回调入队 → queueMicrotask任务入队 → 输出#2nd call。此时微任务队列顺序：[#3rd回调, 自定义微任务]。
2. 清空微任务队列：
   • 执行#3rd回调，输出#3rd call，同时触发链式下一个Promise的resolve，将#4th回调加入队列。
   • 执行自定义微任务，输出I'm microtask from the custom Queue。
   • 执行新入队的#4th回调，输出#4th call，触发第三个Promise的resolve，将#5th回调加入队列。
   • 执行#5th回调，输出#5th call，队列清空。

实验二执行流程拆解

1. 同步代码执行：输出#1st call → 第一个.then()回调入队 → 第二个.then()回调入队 → queueMicrotask任务入队 → 输出#2nd call。此时微任务队列顺序：[#3rd回调, #4th回调, 自定义微任务]。
2. 清空微任务队列：
   • 执行#3rd回调，输出#3rd call。
   • 执行#4th回调，输出#4th call，触发链式下一个Promise的resolve，将#5th回调加入队列。
   • 执行自定义微任务，输出I'm microtask from the custom Queue。
   • 执行#5th回调，输出#5th call，队列清空。

内容的提问来源于stack exchange，提问作者Gonzalo Pincheira Arancibia