How does JavaScript actually work under the hood in your browser

The web runs on JavaScript and developers use it quite heavily for different purposes to add different functionality to their web apps. Imagine how would the web be with just those static pages involving only HTML and CSS Markup. It would be horrible. To experience this, you can try surfing the web by turning off JavaScript in your browser. I am sure most of you will pull your hair out in about half an hour. But this post isn't about the importance of JavaScript. It's about how it actually works under the hood inside your browser to provide all that beautiful functionality that we all see on different web apps we come across daily. This will be quite a short post but very useful in my opinion and every developer should know this, it gives you a better insight of how your browsers actually work.

If you call yourself a web developer, you should be well aware of how JavaScript works.So without further due, let's get started.

So, basically, you all would be knowing that all programming languages have their own syntax and so does JavaScript. That syntax is for the programmer to understand and this is human readable. The machine does not understand this syntax directly. All it can understand is Binary code, i.e. 0s and 1s.



Let's talk about the browser now. Basically your browser has 3 main programs that does all the dirty work for you to provide you a decent web expirience. They are :

1. DOM Interpreter : 

All this does is take your Markup(HTML) and display it in the browser. As simple as that.

2. CSS Interpreter : 

Yeah, all those beautiful styles that you see on your web page is taken care by the CSS interpreter. It takes your CSS code, styles the page and make it look presentable.

Now comes the most important part.

3. JavaScript Engine : 

Every browser has it's own JavaScript engine and they go by different names in different browsers but they all have the same task,i.e., taking up the JavaScript files from the server, interpret them and convert them to Bytecode that can be run on the client's computer. Here are the names of JavaScript engines for these famous browsers :

• Chrome has the famous "V8 Engine"(Node.js was built on top of this)
• Mozilla has the "Spider Monkey Engine"
• Safari has "Nitro"(formerly known as "SquirrelFish")
• Microsoft Edge has "Chakra"

Collectively you call all these 3 interpreters JITs(Just-in-time Compilers). This simply means that all the code that is downloaded from the server to the client's computer is compiled in real time on the client's computer itself.

So that's basically what happens behind the scenes. All the code, be it HTML, CSS and JavaScript is in Human readable format but yeah this is exactly what goes on behind the scenes.

Hopefully, that gave you a bit more understanding of how things work in a browser and added to your knowledge base. I guess that's it for this post, thanks for reading. Till then, keep coding, keep developing, stay healthy and stay productive. See you next time!