JavaScript is a single-threaded language, built to handle tasks one at a time. However, the event loop lets JavaScript handle events and callbacks asynchronously by emulating simultaneous programming systems. This assures the performance of your JavaScript applications.
What Is the JavaScript Event Loop?
JavaScript’s event loop is a mechanism that runs in the background of every JavaScript application. It allows JavaScript to handle tasks in sequence without blocking its main execution thread. This is referred to asasynchronous programming.
The event loop keeps a queue of tasks to run and feeds those tasks to the rightweb APIfor execution one at a time. JavaScript keeps track of these tasks and handles each according to the task’s complexity level.
To understand the need for the JavaScript event loop and asynchronous programming. You need to understand what problem it essentially solves.
Take this code, for example:
This code first defines a function calledlongRunningFunction(). This function will do some kind of complex time-consuming task. In this case, it performs aforloop iterating over 100,000 times. This means thatconsole.log(“Hello”)runs 100,000 times over.
Depending on the computer’s speed, this can take a long time and blockshortRunningFunction()from immediate execution until the previous function completes.
For context, here is a comparison of the time taken to run both functions:
And then the singleshortRunningFunction():
The difference between a 2,351-millisecond operation and a 0-millisecond operation is obvious when you aim to build a performant app.
How the Event Loop Helps With App Performance
The event loop has different stages and parts that contribute to making the system work.
The Call Stack
The JavaScript call stack is essential to how JavaScript handles function and event calls from your application. JavaScript code compiles from top to bottom. However, Node.js, on reading the code, Node.js will assign function calls from the bottom to the top. As it reads, it pushes the defined functions as frames into the call stack one by one.
The call stack is responsible for maintaining the execution context and correct order of functions. It does this by operating as a Last-In-First-Out (LIFO) stack.
This means that the last function frame your program pushes onto the call stack will be the first to pop off the stack and run. This will ensure JavaScript maintains the right order of function execution.
JavaScript will pop each frame off the stack until it’s empty, meaning all functions have finished running.
Libuv Web API
At the core of JavaScript’s asynchronous programs islibuv. The libuv library is written in the C programming language, which can interact with the operating system’s low-level APIs. The library will provide several APIs that allow JavaScript code to run in parallel with other code. APIs for creating threads, an API for communicating between threads, and an API for managing thread synchronization.
For example, when you usesetTimeout in Node.js to pause execution. The timer is set up through libuv, which manages the event loop to execute the callback function once the specified delay has passed.
Similarly, when you perform network operations asynchronously, libuv handles those operations in a non-blocking manner, ensuring that other tasks can continue processing without waiting for the input/output (I/O) operation to end.
The Callback & Event Queue
The callback & event queue is where callback functions wait for execution. When an asynchronous operation completes from the libuv, its corresponding callback function gets added to this queue.
Here’s how the sequence goes:
This way, asynchronous tasks don’t block the main thread, and the callback queue ensures that their corresponding callbacks execute in the order they completed.
The Event Loop Cycle
The event loop also has something called the microtask queue. This special queue in the event loop holds microtasks scheduled to execute as soon as the current task in the call stack completes. This execution happens before the next rendering or event loop iteration. Microtasks are high-priority tasks with precedence over regular tasks in the event loop.
A microtask is commonly created when working with Promises. Whenever a Promise resolves or rejects, its corresponding.then()or.catch()callbacks joins the microtask queue. You could use that queue to manage tasks that need immediate execution after the current operation, such as updating the UI of your application or handling state changes.
For example, a web application that performs data fetching and updates the UI based on the retrieved data. Users can trigger this data fetch by clicking a button repeatedly. Each button click initiates an asynchronous data retrieval operation.
Without microtasks, the event loop for this task would work as follows:
However, with microtasks, the event loop works differently:
Here’s a code example:
In this example, each click on the “Fetch” button callsfetchData(). Each data fetch operation schedules as a microtask. Based on the fetched data, the UI update executes immediately after each fetch operation completes, before any other rendering or event loop tasks.
This ensures that users see the updated data without experiencing any delays due to other tasks in the event loop.
Using microtasks in scenarios like this can prevent UI jank and provide faster and smoother interactions in your application.
Implications of the Event Loop for Web Development
Understanding the event loop and how to use its features is essential for building performant and responsive applications. The event loop provides asynchronous and parallel capabilities, so you can efficiently handle complex tasks in your application without compromising user experience.
Node.js provides everything you need, including web workers to achieve further parallelism outside JavaScript’s main thread.
