JS异步之宏队列与微队列

时间：2022-10-13 17:00:51


原理图

JS异步之宏队列与微队列

JS中用来存储待执行回调函数的队列包含2个不同特定的列队 

  • 宏列队:用来保存待执行的宏任务(回调),比如:定时器回调/DOM事件回调/ajax回调
  • 微列队:用来保存待执行的微任务(回调),比如:promise的回调/MutationObserver的回调

JS执行时会区别这2个队列

  • JS引擎首先必须先执行所有的初始化同步任务代码
  • 每次准备取出第一个宏任务执行前,都要将所有的微任务一个一个取出来执行。当该宏任务执行完成，会检查其中的微任务队列，如果为空则直接执行下一个宏任务，如果不为空，则​​依次执行微任务​​，执行完成才去执行下一个宏任务。
  • 引入微任务的初衷是为了解决异步回调的问题

macrotask（宏任务） 

在浏览器端，其可以理解为该任务执行完后，在下一个macrotask执行开始前，浏览器可以进行页面渲染。触发macrotask任务的操作包括：dom事件回调，ajax回调，定时器回调
script(整体代码)
setTimeout、setInterval、setImmediate
I/O、UI交互事件
postMessage、MessageChannel

microtask（微任务）

可以理解为在macrotask任务执行后，页面渲染前立即执行的任务。触发microtask任务的操作包括：
Promise回调：Promise.then
Mutation回调：MutationObserver
process.nextTick(Node环境)

setTimeout(() => { // 会立即放入宏列队
  console.log('timeout callback1()')
  // 每次准备取出第一个宏任务执行前,都要将所有的微任务一个一个取出来执行
  Promise.resolve(3).then( 
    value => { // 会立即放入微列队
      console.log('Promise onResolved3()', value)
    }
  )
}, 0)
setTimeout(() => { // 会立即放入宏列队
  console.log('timeout callback2()')
}, 0)
Promise.resolve(1).then(
  value => { // 会立即放入微列队
    console.log('Promise onResolved1()', value)
  }
) 
Promise.resolve(2).then(
  value => { // 会立即放入微列队
    console.log('Promise onResolved2()', value)
  }
)

依次输出

  1. Promise onResolved1() 1
  2. Promise onResolved2() 2
  3. timeout callback1()
  4. Promise onResolved3() 3
  5. timeout callback2()

可能存在的问题
如果一个Microtask队列太长，或者执行过程中不断加入新的Microtask任务，会导致下一个Macrotask任务很久都执行不了。结果就是，你可能会遇到UI一直刷新不了，或者I/O任务一直完成不了。
或许是考虑到了这一点，Microtask queue中的process.nextTick任务，是被设置了（在一个事件循环中的）最大调用次数process.maxTickDepth的，默认是1000。一定程度上避免了上述情况。

标签：

相关文章