JS异步宏队列与微队列执行原理详解

JS异步执行队列原理概述

首先参考一张展示其工作原理的示意图。

原理图

在 Node.js 环境中，setImmediate 同样属于宏任务，而微任务则包括 process.nextTick。

宏队列与微队列的定义

JavaScript 中用于存储待执行回调函数的队列由两种不同性质的队列组成。

• 宏队列：用于保存待执行的宏任务（回调），例如：定时器回调、DOM 事件回调、ajax 回调。
• 微队列：用于保存待执行的微任务（回调），例如：Promise 的回调、MutationObserver 的回调。

JS引擎执行流程与优先级

JavaScript 在执行过程中会严格区分这两种队列的处理逻辑。

• JavaScript 引擎首先必须执行所有的初始化同步任务代码。
• 在每次准备取出并执行第一个宏任务之前，引擎会将所有微任务逐一取出并执行完毕。这意味着微任务的优先级高于宏任务，且其执行时机与微任务在代码中的位置无关。

代码示例：微任务优先于宏任务

通过以下示例可以验证 Promise 的执行顺序优先于 setTimeout。

setTimeout(() => { // 立即放入宏队列
  console.log('settimeout callback1()');
}, 0);
setTimeout(() => { // 立即放入宏队列
  console.log('settimeout callback2()');
}, 0);


Promise.resolve(1).then(value => { // 立即放入微队列
  console.log('Promise onResolved1()', value);
})
Promise.resolve(2).then(value => { // 立即放入微队列
  console.log('Promise onResolved2()', value);
})

// Promise onResolved1() 1
// Promise onResolved2() 2
// settimeout callback1()
// settimeout callback2()

全文完。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。