Rectangle 27 0

javascript Difference between microtask and macrotask within an event loop context?


Update: I also gave a talk about this https://www.youtube.com/watch?v=cCOL7MC4Pl0. The talk goes into more detail, including how tasks & microtasks interact with rendering.

Note
Rectangle 27 0

javascript Difference between microtask and macrotask within an event loop context?


Although there's a microtask checkpoint in the event loop, this isn't where most developers will encounter microtasks. Microtasks are processed when the JS stack empties. This can happen many times within a task, or even within the render steps of the event loop.

Basically, use microtasks when you need to do stuff asynchronously in a synchronous way (i.e. when you would say perform this (micro-)task in the most immediate future). Otherwise, stick to macrotasks.

However, at least concerning Node.js's process.nextTick function (which queues microtasks), there is an inbuilt protection against such blocking by means of process.maxTickDepth. This value is set to a default of 1000, cutting down further processing of microtasks after this limit is reached which allows the next macrotask to be processed)

If a microtask recursively queues other microtasks, it might take a long time until the next macrotask is processed. This means, you could end up with a blocked UI, or some finished I/O idling in your application.

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. While these microtasks are processed, they can queue even more microtasks, which will all be run one by one, until the microtask queue is exhausted.

Note
Rectangle 27 0

javascript Difference between microtask and macrotask within an event loop context?


process.nextTick()
setImmediate()
  • (a).select the oldest task(task x) in microtask queue
  • a task may be pushed into macrotask queue,or microtask queue
  • promiseA is pending: the task will be pushed into microtask queue in the future round of event loop(may be next round)
  • promiseA is resolved/rejected: the task will be pushed into microtask queue in current round of event loop.
  • run "task A"(means run the callback function)
  • run all available tasks in microtask queue,then remove them.
  • run the oldest task in macrotask queue,then remove it.
  • select the oldest task(task A) in task queues
  • task in microtask queue will be run in the current round,while task in macrotask queue has to wait for next round of event loop.
  • we all know callback of "click","scroll","ajax","setTimeout"... are tasks,however we should also remember js codes as a whole in script tag is a task(a macrotask) too.
  • when a task is pushed into a queue(micro/macro),we mean preparing work is finished,so the task can be executed now.

when call stack is empty,do the steps-

Note