Microtasks vs. Macrotasks: When Should You Use Which in the JavaScript Event Loop?

Microtasks and Macrotasks in the Event Loop

While exploring the Promises/A specification, you may have encountered the terms "microtask" and "macrotask." These concepts are crucial for understanding the execution flow within an event loop.

Difference between Microtasks and Macrotasks

Each loop iteration consists of a single macrotask being executed. Subsequently, all pending microtasks are processed immediately. However, these microtasks can generate additional microtasks during their execution. All these microtasks are executed sequentially until the microtask queue is empty.

Practical Consequences

If a microtask recursively queues other microtasks, it can delay the execution of the next macrotask. This could potentially block the user interface or prevent the completion of I/O operations.

Protection Mechanisms

Node.js has a built-in protection against excessive microtask queuing through the process.maxTickDepth mechanism. This value limits the depth of microtask execution to a default value of 1000.

When to Use Which

• Microtasks: Use them when you require asynchronous operations to be executed immediately.
• Macrotasks: Prefer them for non-urgent tasks that can be delayed until completion of the current macrotask.

Examples

• Macrotasks: setTimeout, setInterval, requestAnimationFrame, I/O, UI rendering
• Microtasks: process.nextTick, Promises, queueMicrotask, MutationObserver

The above is the detailed content of Microtasks vs. Macrotasks: When Should You Use Which in the JavaScript Event Loop?. For more information, please follow other related articles on the PHP Chinese website!