Difference between microtask and macrotask within an event loop context

javascript node.js promise event-loop
NicBright picture NicBright · Sep 18, 2014 · Viewed 38.3k times · Source

I've just finished reading the Promises/A+ specification and stumbled upon the terms microtask and macrotask: see http://promisesaplus.com/#notes

I've never heard of these terms before, and now I'm curious what the difference could be?

I've already tried to find some information on the web, but all I've found is this post from the w3.org Archives (which does not explain the difference to me): http://lists.w3.org/Archives/Public/public-nextweb/2013Jul/0018.html

Additionally, I've found an npm module called "macrotask": https://www.npmjs.org/package/macrotask Again, it is not clarified what the difference exactly is.

All I know is, that it has something to do with the event loop, as described in https://html.spec.whatwg.org/multipage/webappapis.html#task-queue and https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

I know I should theoretically be able to extract the differences myself, given this WHATWG specification. But I'm sure that others could benefit as well from a short explanation given by an expert.

Answer

NicBright picture NicBright · Sep 19, 2014

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.

What are the practical consequences of this?

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.

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)

So when to use what?

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.

Examples

macrotasks: setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering
microtasks: process.nextTick, Promises, queueMicrotask, MutationObserver

Related questions

Using async/await with a forEach loop

Are there any issues with using async/await in a forEach loop? I'm trying to loop through an array of files and await on the contents of each file. import fs from 'fs-promise' async function printFiles () { const files = await getFilePaths() // …

Read More
Getting a UnhandledPromiseRejectionWarning when testing using mocha/chai

So, I'm testing a component that relies on an event-emitter. To do so I came up with a solution using Promises with Mocha+Chai: it('should transition with the correct event', (done) => { const cFSM = new CharacterFSM({}, emitter, transitions); let …

Read More
Why is my asynchronous function returning Promise { <pending> } instead of a value?

My code: let AuthUser = data => { return google.login(data.username, data.password).then(token => { return token } ) } And when i try to run something like this: let userToken = AuthUser(data) console.log(userToken) I'm getting: Promise { <pending> } …

Read More