Promise为何阻塞Call Stack执行？JS代码执行时序疑问

核心误区是对Promise构造函数的执行时机理解错误：传入Promise构造函数的executor回调是同步立即执行的，不属于异步任务。

先对应代码拆解完整执行流程，匹配你观察到的卡顿和输出现象：

function main() {
  console.log("S-1");

  setTimeout(() => {
    console.log("setTimeout");
  }, 0);

  new Promise((resolve, reject) => {
    // 注意：这里的代码是同步执行的
    for (let i = 0; i < 10000000000; i++) {}
    resolve("Promise");
  }).then((res) => console.log(res));

  console.log("S-2");
}

main();

整个执行过程完全遵循JS单线程事件循环规则：

1. main()函数调用压入调用栈，第一行同步执行console.log("S-1")，控制台立刻打印S-1
2. 遇到setTimeout，将其回调注册到宏任务队列，即使延迟设为0也不会立即执行，继续向下执行同步逻辑
3. 执行new Promise实例化操作：传入的executor回调（包含100亿次空循环的函数）会被同步立即调用，此时直接启动长耗时循环，完全占死主线程。这就是打印S-1后立刻卡顿数秒的根本原因——这时候后面的console.log("S-2")根本没机会执行，连控制台的UI刷新、IO输出都会被阻塞。
4. 数秒后循环执行完毕，调用resolve("Promise")将then中的回调注册到微任务队列，executor执行结束，继续向下走同步代码
5. 执行最后一行同步代码console.log("S-2")，打印S-2，此时main函数所有同步逻辑执行完毕，调用栈清空
6. 事件循环开始清空当前轮次的微任务队列：取出Promise的then回调执行，打印Promise，微任务队列清空
7. 本轮微任务清空完成，事件循环拉取宏任务队列中的setTimeout回调执行，打印setTimeout

你观察到的“卡顿结束后剩余日志一次性全部输出”，是因为长循环阻塞主线程期间，浏览器的控制台渲染、IO更新逻辑也属于主线程任务，同样被阻塞，所有待输出的日志会在主线程空闲后一次性刷出，不是真的所有打印逻辑都在卡顿结束后才执行。

Promise阻塞调用栈的底层逻辑 #

很多人初学Promise会误以为“包在Promise里的代码都是异步的”，这是完全错误的认知：

• Promise本质是异步操作的状态容器，传入构造函数的executor是为了封装异步逻辑设计的，但它本身的执行是完全同步的——你在executor里写的同步代码，和直接写在Promise外面没有任何执行时机上的区别，都会在new Promise的瞬间立刻压入调用栈执行，只要是长耗时同步代码就会阻塞主线程。
• 只有then/catch/finally中注册的回调，才会被作为微任务加入任务队列，等当前所有同步代码执行完、调用栈清空后，才会被事件循环取出执行。
• JS的调用栈是单线程模型，所有同步任务会按顺序在栈中执行直到清空，才会处理任务队列中的异步任务，任何位置的长耗时同步代码都会阻塞后续所有逻辑（包括DOM渲染、用户交互、IO输出、异步回调执行），和它是不是被包在Promise里没有关系。

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