宏任务和微任务

栈(Stack)和队列(Queue)

栈(Stack)和队列(Queue)是两种基础的数据结构。

• 栈是后进先出（类似弹夹），后面来的却最先出去。
• 队列是先进先出，这意味着最先进入队列的元素会被最先取出，类比生活中的排队。

调用栈

调用栈中，放的是要执行的代码

任务队列

任务队列里的是将要执行的代码¹

JS中任务队列有两种

• 宏任务队列(大部分代码都去宏任务队列中去排队)
• 微任务队列(Promise的回调函数(then、catch、finally))
• 整个流程
  （1）执行调用栈中的代码
  （2）执行微任务队列中的所有任务（在调用栈中所有任务执行完毕之后）
  （3）执行宏任务队列中的所有任务（在微任务队列中所有任务执行完毕之后）

举例

console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
Promise.resolve().then(() => setTimeout(() => console.log(4)))
Promise.resolve().then(() => console.log(5))
setTimeout(() => console.log(6))
console.log(7);

console.log(1);放入调用栈中（放入后立即执行输出1）
setTimeout(() => console.log(2));放入宏任务队列
Promise.resolve().then(() => console.log(3));放入微任务队列
Promise.resolve().then(() => setTimeout(() => console.log(4)))放入微任务队列
Promise.resolve().then(() => console.log(5))放入微任务队列
setTimeout(() => console.log(6))放入宏任务队列
console.log(7);放入调用栈

除了调用栈中代码立即执行外，其他队列里面都是先压入队列中再进行具体的代码分析，根据情况进行细分。压入队列之后先进行微任务代码执行，微任务代码执行完毕之后再进行宏任务代码的执行。谨记要压入队列完毕之后再进行细分的压队。

---

1. 当调用栈中的代码执行完毕后，队列中的代码才会按照顺序依次进入到栈中执行 ↩︎