Macro tasks, Micro tasks and Long tasks - Web dev
Tags: webdev, performance, browser, javascript
Published: 2024-05-15 17:21:19

**Tasks: The Essential Components of All Browser Activity**

Imagine a web browser as a tireless worker, ceaselessly performing a myriad of tasks to ensure your browsing experience is seamless. Every little thing it does, from parsing HTML code to running your JavaScript, is considered a **task**. These tasks can be initiated by various events, such as user interactions, network requests, or even internal operations within the browser itself.


![Browser task](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvqawoqt4dxoizywg5oj.png)



**The Main Thread: The Orchestra's Busy Maestro**

The browser possesses a single main thread that is responsible for handling all these tasks. You can think of it as the maestro of an orchestra, coordinating every section to create a harmonious performance. However, there's a catch: the main thread is only capable of executing one task at a time. This means that any task that takes a long time to complete can block the main thread, leading to a delay in other tasks and making your website feel unresponsive and sluggish.


![Browser main thread](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c00172les8zcblp3n7fl.png)



**The Event Loop: The Master Choreographer of Tasks**

So, how does the browser keep everything from coming to a standstill when there's a long-running task? The answer lies in the **Event Loop**. This ingeniously designed mechanism continuously checks for tasks in a queue and executes them one after the other on the main thread. Whenever a new task comes in, it is added to the queue, ensuring that every task is executed in an orderly manner.

**Macrotasks vs. Microtasks: A Matter of Task Hierarchy**

However, it's important to note that not all tasks are created equal. We have two primary categories of tasks: **Macrotasks** and **Microtasks**. Macrotasks include typical JavaScript code, network requests, and DOM manipulations. Microtasks, on the other hand, consist of smaller tasks like resolving promises or handling `async/await`.

The key difference between the two lies in their execution order: whenever a macrotask finishes, the Event Loop processes any pending microtasks before it moves on to the next macrotask. This hierarchical structure ensures that the browser remains responsive, allowing it to handle user interactions even in the middle of long-running macrotasks.


![Micro tasks and macro tasks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15a9khxq82akaqkhda64.png)



**The Nemesis of Smooth Scrolling: Long Tasks**

While the Event Loop does a commendable job of managing tasks, any task that takes too long to complete (generally anything above 50ms) becomes a **long task**. A long task can block the main thread, leading to stuttering animations, delayed input responsiveness, and an overall frustrating user experience.

**Detecting Long Tasks: Unmasking the Culprit**

Fortunately, modern developer tools like Chrome DevTools come to our aid. The **Performance** tab in these tools enables you to identify long tasks, pinpointing the specific code that is causing the bottleneck and allowing you to optimize your website for a smoother user experience.


![Chrome long task](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c62gcr22tg7b3a7cg9no.png)