JavaScript Event Loop: Macro Tasks vs Micro Tasks Execution Analysis

This article explores JavaScript execution processes through the lens of the JavaScript specification, examining the evolution of event handling in balancing timeliness and efficiency. Starting from the fundamental mechanism of event queues, it analyzes the differences between macro tasks and micro tasks, providing detailed analysis of complex JavaScript code execution involving nested tasks.

The article begins by explaining callback mechanisms in JavaScript, noting that callbacks are essentially state notifications triggered after certain code modules complete execution. Common examples include setTimeout timers and AJAX requests, which exist due to JavaScript's single-threaded design. The author discusses how JavaScript must balance execution timeliness (ensuring code executes within current time constraints) and efficiency (minimizing delays in subsequent executions).

Early browser implementations typically ran page content (rendering, event listening, network requests, file handling) in a single thread, with JavaScript running on the same thread. When events triggered, they might not execute immediately due to other tasks running or to avoid blocking the thread. This led to the development of message queues where callback logic is stored and executed after main context completion.

The article then distinguishes between macro tasks and micro tasks. Macro tasks are standard JavaScript tasks scheduled through mechanisms like program startup, event callbacks, or interval/timeout triggers. Micro tasks, on the other hand, are defined as tasks that execute after the main function completes but before the current macro task ends. The key difference is that micro tasks must be asynchronous and execute in a specific timing window.

Common macro task creation methods include setTimeout, while micro tasks include Promise, Generator, and async/await. The article provides a detailed code example demonstrating how these tasks execute in different environments, showing that browser implementations strictly follow the micro task definition, while Node.js versions before 11 had different behavior, executing tasks of the same origin together rather than strictly separating macro and micro tasks.

The analysis reveals that Node.js changed its implementation in version 11 to match browser behavior, addressing what appears to be an earlier implementation error. The article concludes by noting that while most modern browsers follow the specification, there are still differences across versions and environments that developers should understand to avoid subtle bugs.