Javascript API 显式添加微任务或宏任务

Javascript API to explicitly add micro tasks or macro tasks

从我对javascript虚拟机如何工作的全局理解来看,我可以清楚地看到微任务/宏任务的概念发挥了很大的作用。


以下是我的理解:


这是我的问题的重点:

为什么没有明确的API来操作那两个队列。

类似

实际上,操作这些队列的唯一方法是使用 setTimeout() 将任务添加到宏任务队列,并使用 Promises 将任务添加到微任务队列...

我同意,但这并没有给我们带来任何意义 API,你不觉得吗?

这个概念是否应该 'hidden' 保留给 JS 开发人员并且只在一些 hacky 情况下使用?

您知道是否有任何关于该主题的 W3C 规范?

是否所有 VM 引擎都以相同的方式实现这个概念?

我很乐意听到关于这方面的故事和意见。

谢谢!

是否有任何关于 micro/macro 任务的 W3C 规范?

W3C 谈到 task queues:

When a user agent is to queue a task, it must add the given task to one of the task queues of the relevant event loop. All the tasks from one particular task source (e.g. the callbacks generated by timers, the events dispatched for mouse movements, the tasks queued for the parser) must always be added to the same task queue, but tasks from different task sources may be placed in different task queues.

EcmaScript2015讲到Job Queues,要求至少支持两个:

  • ScriptJobs: Jobs that validate and evaluate ECMAScript Script and Module source text.
  • PromiseJobs: Jobs that are responses to the settlement of a Promise.

这种语言定义不知道可能的事件循环,但可以想象一个或多个作业队列被​​保留用于 W3C 规范中提到的任务队列。浏览器将根据 W3C 任务队列规范触发 setTimeout 回调 - 链接到作业队列 - 而承诺 必须 直接使用作业队列规范(不是任务队列)。还提到代理可以将任务注入作业队列:

Alternatively, [an implementation] might choose to wait for a some implementation specific agent or mechanism to enqueue new PendingJob requests.

EcmaScript 规范不强制为不同的作业队列提供服务的优先级:

This specification does not define the order in which multiple Job Queues are serviced. An ECMAScript implementation may interweave the FIFO evaluation of the PendingJob records of a Job Queue with the evaluation of the PendingJob records of one or more other Job Queues.

因此,这里似乎没有严格要求应在 setTimeout 任务之前为承诺履行提供服务。但是 Web 超文本应用技术工作组 [WHATWG] 在涵盖 event loops:

时更加具体

Each event loop has a microtask queue. A microtask is a task that is originally to be queued on the microtask queue rather than a task queue.

[2019 添加]: 同时 Living HTML Standard [WHATWG] 现在包括以下内容:

8.6 Microtask queuing

self.queueMicrotask(callback)

Queues a microtask to run the given callback.

The queueMicrotask(callback) method must queue a microtask to invoke callback, and if callback throws an exception, report the exception.

The queueMicrotask() method allows authors to schedule a callback on the microtask queue. This allows their code to run after the currently-executing task has run to completion and the JavaScript execution context stack is empty, but without yielding control back to the event loop, as would be the case when using, for example, setTimeout(f, 0).

所有 VM 引擎都以相同的方式实现吗?

从历史上看,不同的浏览器实现会导致不同的执行顺序。这篇 2015 年的 article 可能是一本有趣的读物,可以看看它们有多么不同:

Some browsers [...] are running promise callbacks after setTimeout. It's likely that they're calling promise callbacks as part of a new task rather than as a microtask.

Firefox and Safari are correctly exhausting the microtask queue between click listeners, as shown by the mutation callbacks, but promises appear to be queued differently. [...] With Edge we've already seen it queues promises incorrectly, but it also fails to exhaust the microtask queue between click listeners, instead it does so after calling all listeners.

从那时起,一些问题已经得到解决和协调。

但是请注意,不一定要有一个微任务队列,也不是一个宏任务队列。可以有多个队列,每个队列都有自己的优先级。

有意义API

实现你建议的两个功能当然没有那么难:

let pushToMicroTask = f => Promise.resolve().then(f);
let pushToMacroTask = f => setTimeout(f);

pushToMacroTask(() => console.log('Macro task runs last'));
pushToMicroTask(() => console.log('Micro task runs first'));

[2019] 现在我们有了 queueMicrotask(),就有了原生实现。这是一个将该方法与上面基于 Promise 的实现进行比较的演示:

let queuePromisetask = f => Promise.resolve().then(f);
let queueMacrotask= f => setTimeout(f);

queueMicrotask(() => console.log('Microtask 1'));
queueMacrotask(() => console.log('Macro task'));
queuePromisetask(() => console.log('Promise task'));
queueMicrotask(() => console.log('Microtask 2'));