That one time every page run on a single thread

Web pages, a source of vast information, knowledge and cat videos, eaters of time and masters of procrastination. But what will you see if you sneak a peek under the hood of these technological masterpieces? Well, you will see JavaScript going about its business. You will also notice that it is doing everything in a single thread.

Wait, what?!?

But all these pages, loading so fast and doing all sorts of shenanigans... How does that fit in that one thread? Well, the short answer is: JavaScript never runs pages alone.

chair

Teaming up with the browser

As you can probably guess, there is more to it than just JavaScript running everything. The language is single-threaded if it runs in a compiler on its own, but that is not the case in the real world. In the real world, we run JavaScript code in a browser. This might not look like a huge help, but actually, the browser does a lot of heavy lifting and helps JavaScript a lot in getting things done. The browser itself has a variety of APIs and features that help JavaScript run smoothly and not clog and stop. You might be familiar with some of them like SetTimeout, SetInterval, Console.log and so on. These features appear to us as if they are core features of JavaScript, but in fact, they are browser features that help lift clogging tasks from the stack.

The magical system

If the browser and the language constantly communicate they would probably need some sort of system to keep track of the code that is pushed in and out of that one thread ( Stack ). This communication is key because the only place where JavaScript code can be executed is that single thread. So how does the browser know when to bring code back to the thread? Well, there is another cool and key structure in the browser that manages exactly that - It's called the event queue. 

This queue gathers JavaScript code from the browser’s API's and it waits for the stack to finish so it can load that code in the stack for execution. Then a mechanic called event loop checks if the thread is empty and informs the event queue so it can dump its code into the thread. So when we call SetTimeout() JavaScript kicks out the SetTimeout() function from the thread and off to the timer API of the browser. The browser waits, however, the long time it was told to wait and then it returns the function that was in the setTimeout() in the event queue. The event loop checks the thread if it’s empty and when it is it adds the function from the event queue on to the thread so it can be executed. And that’s all there is to it.

 

Summary

Now we know JavaScript “single-threaded” magic. Tho many developers tend to laugh at JavaScript for it’s the different approach to solving problems, it’s a fresh air to work with something different and unique that is thriving and exceeding all expectations. Hope this sparks a light to read and research more on this topic.


Here are a few of my revelation resources:
An awesome video about the event loop
An interesting tool for visualizing javascript runtime ( It does not support ECMAScript 6 )

Category
on October 2, 2018