VM 调度的微观艺术——剖析 V8 中的微任务队列与 async/await

2024-01-13 08:10:57

V8 引擎作为 JavaScript 的强大执行环境，其微任务队列与 async/await 特性，一直备受开发者的关注。本文将深入剖析这些特性在 V8 引擎中的实现原理，一览 V8 对事件循环与任务调度的精妙调度能力。

微任务队列：巧妙的任务穿插

微任务队列是 V8 引擎中一个特殊的任务队列，用来处理那些需要在当前事件循环中尽早执行的任务。这些任务通常是事件回调函数、Promise 回调函数、MutationObserver 回调函数等。

V8 引擎会在每个事件循环中，先执行微任务队列中的所有任务，然后再执行宏任务队列中的任务。这样，微任务队列中的任务就会优先于宏任务队列中的任务执行。

console.log('script start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('script end');

运行这段代码，可以看到如下输出：

script start
Promise
script end
setTimeout

可以看到，Promise 回调函数在 setTimeout 回调函数之前执行。这是因为 Promise 回调函数是在微任务队列中执行的，而 setTimeout 回调函数是在宏任务队列中执行的。

async/await：异步编程的语法糖

async/await 是 ES2017 中引入的异步编程特性，它允许开发者使用同步的语法来编写异步代码。

async/await 的原理是，当遇到 await 时，JavaScript 引擎会暂停当前函数的执行，并将当前函数的上下文压入一个栈中。然后，JavaScript 引擎会执行 await 后面的表达式，并把结果存储在当前函数的上下文中。当表达式执行完毕后，JavaScript 引擎会从栈中弹出当前函数的上下文，并恢复当前函数的执行。

async function asyncFunc() {
  const result = await Promise.resolve(1);
  console.log(result);
}

asyncFunc();

运行这段代码，可以看到如下输出：

可以看到，asyncFunc 函数中的代码就像同步代码一样执行，但是实际上它是一个异步函数。

V8 中的实现

V8 引擎对微任务队列和 async/await 的实现非常精妙。

V8 引擎使用一个称为 "microtask queue" 的数据结构来存储微任务队列中的任务。microtask queue 是一个先进先出的队列，这意味着最早进入队列的任务将最早被执行。

V8 引擎使用一个称为 "task queue" 的数据结构来存储宏任务队列中的任务。task queue 也是一个先进先出的队列，这意味着最早进入队列的任务将最早被执行。

当 JavaScript 引擎遇到微任务队列中的任务时，它会将该任务从微任务队列中取出，并将其放入 task queue 中。然后，JavaScript 引擎会继续执行 task queue 中的任务。

当 JavaScript 引擎遇到 async 函数时，它会创建一个新的执行上下文，并将该执行上下文压入一个栈中。然后，JavaScript 引擎会执行 async 函数中的代码。当遇到 await 关键字时，JavaScript 引擎会暂停当前函数的执行，并将当前函数的执行上下文压入栈中。然后，JavaScript 引擎会执行 await 后面的表达式，并把结果存储在当前函数的执行上下文中。当表达式执行完毕后，JavaScript 引擎会从栈中弹出当前函数的执行上下文，并恢复当前函数的执行。