javascript - 为什么带有 'await'的这行代码会触发微任务队列处理呢？

Question

以下引述是我理解微任务队列处理的主要引用资料:

Microtasks (which promises use) are processed when the JS stack empties.

- Jake Archibald

这对我来说没有意义。

One go-around of the event loop will have exactly one task being processed from the macrotask queue (this queue is simply called the task queue in the WHATWG specification). After this macrotask has finished, all available microtasks will be processed, namely within the same go-around cycle.

- Stack Overflow

现在，关于以下代码段中的第 9 行 (**):

通过使用调试器逐步执行此代码段，当处理/执行这些 .then( callback ) 微任务时，执行堆栈不会显示为空。

像 f2() 这样的常规函数​​是否被视为任务(又名宏任务)？ (当它返回时，它是一个事件循环 nextTick() 并且微任务队列被处理)

为什么当 JS 栈不为空时微任务会执行？

function f2() {
    let x = new Promise( (resolve, reject) => { resolve( () => {console.log('howdy')} ) })
    return x
}

async function f1(){
    let y = Promise.resolve().then(() => { console.log('yo1')})
    console.log('yo2')
	let r2awaited =  await f2() //** 'yo0' and 'yo1' log when the interpreter hits this line.
	return r2awaited
}

async function start(){
     let y = Promise.resolve().then(() => { console.log('yo0')})
	let xx = await f1()
	console.log('main call return:')
	console.log(xx)
}
start()

编辑:另一个奇怪的发现 - 当您在第 17 行 console.log(xx) 之后添加 xx() 时，堆栈完全清除 在执行微任务之前。

微任务队列处理之前的调用栈1:

然后是紧接着的下一步。

在这两个步骤之间，处理了微任务队列。

调用堆栈是否在这些步骤之间清除了[幕后]^？

然后await [expression]之后的代码是否根据所需的词法环境创建了一个新的调用栈？

编辑:在发布这篇文章时，我并不知道 chrome 调试器调用堆栈中 -----(async)----- 行下方的所有内容都是“假堆栈”的一部分。

此“假堆栈”以与同步调试一致的方式呈现用于异步调试。

只有此 -----(async)----- 行之上的元素才是真正的主线程调用堆栈的一部分。

Answer 1

"Microtasks (which promises use) are processed when the JS stack empties." -Jake Archibald (doesn't make sense to me)

“调用堆栈”是当前正在执行的事物的列表:

function foo() {
  debugger;
  console.log('foo');
}

function bar() {
  foo();
  debugger;
}

bar();

当我们命中第一个调试器语句时，脚本仍在执行，bar 也是，foo 也是。由于存在父子关系，堆栈为 script > bar > foo。当我们点击第二个调试器语句时，foo 已完成执行，因此它不再位于堆栈中。堆栈是 script > bar。

当堆栈变空时，微任务队列会一直处理到它为空。

"One go-around of the event loop will have exactly one task being processed from the macrotask queue (this queue is simply called the task queue in the WHATWG specification). After this macrotask has finished, all available microtasks will be processed, namely within the same go-around cycle." - stackoverflow

编辑:我一直把上面的“macrotask”读成“microtask”。浏览器中实际上并没有宏任务队列这样的东西，它只是一个任务队列。

虽然在处理任务后确实有一个微任务处理点，​​但它只是真正在那里处理规范，将任务排队到队列微任务，而不需要先调用JS。大多数时候，微任务队列在 JS 堆栈清空时清空。

From stepping through this snippet w/ debugger, the execution stack does not appear empty when these .then( callback ) microtasks are processed/executed.

当执行回调时，堆栈永远不会为空，因为回调本身将在堆栈上。但是，如果这是堆栈上唯一的东西，您可以假设在调用此回调之前堆栈为空。

Chrome 的开发工具试图帮助维护“异步”堆栈，但这不是真正的堆栈。真正的堆栈是第一个“异步”行之前的所有内容。

Are regular functions like f2() considered a task

作为任务或微任务不是函数的属性。可以在任务、微任务和事件循环的其他部分(例如渲染)中调用相同的函数。例如:

function foo() {}

// Here, I'll call foo() as part of the current task:
foo();

// Here, I'll let the browser call foo() in a future task:
setTimeout(foo);

// Here, I'll let the browser call foo() in a microtask:
Promise.resolve().then(foo);

// Here, I'll let the browser call foo() as part of the render steps:
requestAnimationFrame(foo);

在您的示例中，f2 未在微任务中调用。有点像这样:

function three() {}
function two() {}

async function one() {
  await two();
  three();
}

one();

此处，one() 在执行脚本的任务中被调用。 one() 同步调用 two()，因此它作为同一任务的一部分运行。然后我们等待调用two() 的结果。因为我们 await，函数的其余部分在微任务中运行。 three() 被调用，所以它在同一个微任务中运行。