宏任务和微任务
栈(Stack)和队列(Queue)
栈(Stack)和队列(Queue)是两种基础的数据结构。
- 栈是后进先出(类似弹夹),后面来的却最先出去。
- 队列是先进先出,这意味着最先进入队列的元素会被最先取出,类比生活中的排队。
调用栈
调用栈中,放的是要执行的代码
任务队列
任务队列里的是将要执行的代码1
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);放入调用栈
除了调用栈中代码立即执行外,其他队列里面都是先压入队列中再进行具体的代码分析,根据情况进行细分。压入队列之后先进行微任务代码执行,微任务代码执行完毕之后再进行宏任务代码的执行。谨记要压入队列完毕之后再进行细分的压队。
当调用栈中的代码执行完毕后,队列中的代码才会按照顺序依次进入到栈中执行 ↩︎