宏任务与微任务

JS执行机制

同步任务

同步任务都在主线程上执行，形成一个执行栈。

异步任务

JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval、setTimeout 等

异步任务相关添加到任务队列中（任务队列也称为消息队列）。

事件循环

1. 先执行执行栈中的同步任务。
2. 异步任务放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

宏任务与微任务

异步任务划分为了

• 宏任务：由浏览器环境执行的异步代码
• 微任务：由 JS 引擎环境执行的异步代码

宏任务和微任务具体划分：

事件循环模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/**
 * 阅读并回答打印的执行顺序
*/
console.log(1)
setTimeout(() => {
  console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {
  resolve(3)
})
p.then(res => {
  console.log(res)
})
console.log(4)

注意：宏任务每次在执行同步代码时，产生微任务队列，清空微任务队列任务后，微任务队列空间释放！

下一次宏任务执行时，遇到微任务代码，才会再次申请微任务队列空间放入回调函数消息排队

总结：一个宏任务包含微任务队列，他们之间是包含关系，不是并列关系

经典题目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 目标：回答代码执行顺序
console.log(1)
setTimeout(() => {
  console.log(2)
  const p = new Promise(resolve => resolve(3))
  p.then(result => console.log(result))
}, 0)
const p = new Promise(resolve => {
  setTimeout(() => {
    console.log(4)
  }, 0)
  resolve(5)
})
p.then(result => console.log(result))
const p2 = new Promise(resolve => resolve(6))
p2.then(result => console.log(result))
console.log(7)

结果：1 7 5 6 2 3 4

执行顺序：

1. console.log(1)
2. setTimeout()作为宏任务推入到宏任务队列中排队
3. const p = new Promise放到调用栈执行，遇到里面的setTimeout（）放入宏任务队列中排队
4. p.then（）当promise为成功状态时作为微任务推入到微任务中排队
5. const p2 = new Promise 成功
6. p2.then立刻作为微任务推入到微任务中排队
7. console.log(7)
8. 从微任务队列中调度p.then(result => console.log(result))，打印5
9. 从微任务队列中调度p2.then(result => console.log(result))，打印6
10. 从宏任务队列中调度setTimeout（），打印2，const p = new Promise(resolve =>resolve(3))为成功状态，p.then(result => console.log(result))立刻被推入到微任务队列中排队
11. 从微任务队列中调度p.then(result => console.log(result))，打印3
12. 从宏任务队列中调度setTimeout(() => {
    console.log(4)
    }, 0)，打印4

License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

Share