Under the hood of how html pages gets displayed on out browser

Ok this might be a very boring heading and i doubt if this article would ever come up the search list lol.

Any ways why did i choose this topic? Simply because as a frontend engineer its always very important that you understand the web, how it works and what happens under the hood whenever we try to render a page on our browser.

So what really happens anytime we make a request on the web. I would keep it simple.

So anytime we type add an address on our browser/make a request to display a file on a web page, the browser which is also called the client sends a HTTP request to the server wherever the page we are requesting for lives. Once the server accepts this request, it sends an ok or a status code 200 to the client showing that it approves of it and then sends back the requested file in small chunks. The reason why the file are broken down and sent in small chunks is to allows multiple access of that file at a same time to other clients. Then the client assembles the small chunks as a whole and then displays the page on your web browser.

Here is an image of what the process would look like

Under the hood, the browser for looks out for the html page and parses it. Which is why its always recommended to have your html page on the public folder so that it can be easily accessed by the browser.

Once the html page is parsed, other files like the CSS and JavaScript files which have also been linked to that html page using the various html elements are also requested by the client from the server and displayed.

The browser does this by generating a DOM tree in-memory so that the html page is displayed. The CSS file which is requested is also displayed also by generating a CSSOM tree while JavaScript file is compiled by the JavaScript engine which is in built in all web browsers before the page is displayed on our web browser.

So when next you make a request, this is exactly how the page gets to your browser.