Event Loop in Chrome browser
After hours I’ve spent surfing the Internet in search of information about Event Loop, Main Thread, Tasks, Microtasks, and similar things, there are still numerous questions that have been left unanswered. Therefore, I’ve decided to slice and dice existing data, make notes and help both you and me succeed.
Let’s get started. Main Thread is the primary notion we should deal with, as the code of each browser page is accomplished within it. Main Thread is the main “thread” where the browser performs JS, redraws, handles custom actions, and fulfills other tasks. In fact, it is where the JS engine is integrated into the browser.
Here’s a diagram that sheds light on Event Loop and its functioning:
As you can see, Event Loop is the only way that helps tasks to get to the Call Stack and be fulfilled there. Just imagine that you happen to be in its place, and your task is to have enough time to “clean up” assignments. Tasks can be of two types:
- Personal — execution of the main JavaScript code on the website (let’s assume that it has already been executed).
- Customer tasks — Render, Microtasks and Tasks
Personal tasks are likely to have higher priority, and Event Loop is ok with it. The only thing you need to do is to streamline customer tasks.
The first thing that comes to mind is to ask customers to specify the priority of the tasks and line them up accordingly. The second option is to determine the way the tasks will be handles, one at a time, all at once, or maybe, even in packs.
Let’s have a loop at this diagram:
The Event Loop functioning is based on this diagram.
Once we have started to run any script, the task of script execution enters on Tasks queue. As the code progresses, we encounter tasks from different customers, who are lined accordingly. After the task on the script execution (assignment from Tasks) is completed, Event Loop proceeds to Microtasks (after the performance of assignments from Tasks, Event Loop accomplishes the ones from Microtasks). The process goes on until the tasks run out. It means that if the time they are added is equal to the time of their execution, Even Loop will endlessly sort them out.
Next, it moves to Render and performs tasks mentioned there. The tasks from Render are optimized by the browser. If there is nothing to be redrawn in this cycle, Event Loop will simply move on. Then Event Loop takes the first tasks lined in the Tasks queue, passes it to Call Stack, and proceeds with the cycle.
If one of the customers has no tasks, Event Loop moves to the next one. And vice versa, if the accomplishment of the customer’s tasks takes a lot of time, the rest of the customers will have to wait for their turn. If the tasks from a single customer seem endless, the Call Stack gets overflown, and the browser shows errors.
Now that we’ve figured out the way Event Loop functions, let’s think about the way to process the following code sample:
As you can notice, the firstExample function calls itself recursively through the setTimeout, but it created a new customer task in Tasks every single time it is activated. As you remember, Event Loop takes only one task from the Tasks as it processes the tasks queue. Then, it deals with the tasks from Microtasks and Render. Therefore, this piece of the code will not keep Event Loop busy sorting out its tasks. Instead, it will give a new task for the customer Tasks on each lap.
Let’s try to execute this script in the Google Chrome browser. I have created a simple HTML document and plugged script.js with this piece of code. After you open the document, enter the developer’s tools, open the Performance tab, and press the “start profiling and reload page” button:
You see that tasks from Tasks are performed one at a time, once every 4ms.
Let’s consider the second example:
The situation here is the same as in the previous example, but the secondExample call adds tasks from Microtasks, and they execute all assignments until they run out. It means that Event Loop cannot move the next customer until it is done with the previous one. And you can see a sad picture again.
Let’s take a loop at this in the development tools:
You can see that Microtasks are performed approximately once in 0.1 ms, which is 40 times faster than the Tasks queue. That’s because they are executed all at once. The line moved endlessly in our task. I have reduced it to 100,000 iterations for better visualization.
That’s it!
Hopefully, this article has been helpful so that now you clearly understand the way Event Loop functions.
