JavaScript : What happens with the browser ?
Tags: javascript, html, css, webdev
Published: 2019-06-02 10:01:38

Understanding what the browsers does with our JavaScript code is very important. It gives us a tremendous understanding as web developers to really get under the hood and discover what happens with JavaScript.

So, briefly all languages, no matter what programming language, it is in a human readable format. This is the syntax of the language that follows the programmers. However your computer cannot understand this. All it can understand is what’s called byte code or ones and zeros.

So, now lest understand the browser a little more with each application you have most of the time. It is made of lots of little different applications that controls certain aspects of the program. It looks like one program but it is actually made of many different programs.

***"For example, the browser has 3 main programs that we are interested in."***

The first program is the DOM interpreter. This will take your hypertext markup language document or HTML document and convert that and display in the browser.


![](https://thepracticaldev.s3.amazonaws.com/i/suc546vrnnzg7bhk1unx.gif)


Next, we have another program that is the part of the browser which is the CSS interpreter. This will take the CSS code and style the page and make it look nice.

![](https://thepracticaldev.s3.amazonaws.com/i/9286ennb78rewemqd972.png)


And then finally we have another little mini program called the JavaScript engine. Now this JavaScript engine program can go by different names in different browsers but they’re just code names for the JavaScript engine of the browser. For example, Firefox has Spider Monkey, Google Chrome has V8 engine, Safari has Nitro and IE has Chakra.

***wait for my next article for a deep down explanation on JavaScript engines ;)***

![](https://thepracticaldev.s3.amazonaws.com/i/nfwyo94td2kkyif65byj.gif)


So, it doesn’t really what the program is called, it’s a JavaScript engine and its so job is to take the JavaScript files that is downloaded from the web server and interpret them and compile them into byte code that can be run on user’s computer. This is why we call it client side because everything is being downloaded to the client’s computer whether it can be HTML, CSS or JavaScript, is being interpreted in clients side on their computer.

![](https://thepracticaldev.s3.amazonaws.com/i/3s2e75wemwo7m1k1uy6v.png)


So, these three major mini programs are called just in time compilers or JIT compilers. So, that simply means that the source code that is downloaded on to the computer is compiled in real time from when the file is successfully downloaded and it’s compiled on user’s computer. So, again it’s just convert it to byte code, so it can be displayed.

So, that’s all that’s happening with the browser. So, hopefully that gives you a bit more understanding of what happens with your JavaScript.

Note that, however when user downloads the HTML, CSS and JavaScript files, they are in the human readable format. So anybody can look at the source code. However this is the whole point of the web that is open, it’s flexible and it is expandable. So there’s no way of actually stopping somebody from looking at the source code and to be honest with you, I have learned a lot by looking at the other peoples source code. So, by the web being open and having the just-in-time compilers across many different platforms we are allowing native browsers to take care of the compilation process and we are just simply delivering the file that will be interpreted.

***  

Follow me at [@Azkar_moulana](https://twitter.com/Azkar_moulana) for interesting articles and chats on JavaScript, Angular, Node.js and more..