How the browser renders the website page ?
Pandurang Patil
Chief Architect at Privado.ai ● AdTech ● FinTech ● E-Commerce ex-CTO-Gromor finance, ex DoubleClick (Google), Paytm, PubMatic, Symantec
Let's briefly understand when you open the browser and type in the web address like https://www.ugaoo.com. What all things happen behind the scene roughly, before you start seeing the website page being rendered in your browser.?
The important point here to understand is that the server can respond with a new URL to which the user can be redirected. You will notice this redirected URL getting changed in the browser address bar.
Above we looked at how the server receives the request and responds with the HTML page. Let's now briefly understand what is HTML page is all about.?
What is an HTML page?
Long-form - HyperText Markup Language.
Its text file which contains HTML <html>, <img> <a> etc with their respective starting and ending tags, arranged in defined structure by the HTML standard. These tags are arranged in parent child relationship like below. Entire contents are enclosed inside starting and ending <html> tag.
<html>
<head>
<title> Hello </title>
</head>
<body>
<p> Hello web world </p>
</body>
</html>
The HTML page is divided into two major sections <head> and <body>. The first <head> section contains the tags and contents related to showing the title, logo, and other relevant configurations used by the browser to render the page properly. It also ideally contains other resources like CSS & javascript URLs which are processed by the browser to render the page. ( I will not get into details of what is CSS and Javascript. They themselves are big topics individually to understand in detail). The second section <body> contains the HTML tags which result in the page that you see in your browser.
There are a few other resources that contribute to the page rendering that we see in the browser.
JavaScript - <script> - It's a programming language that facilitates the processing of actions taken by the user like validating the inputs. Along with that it also facilitates the generation of HTML content dynamically on the browser side. Modern age SPA (Single Page App) frameworks use this mechanism. (I will publish a separate article on SPA).
CSS (Cascading Style Sheets) - <style> - as its name suggests it provides styling for the HTML elements with color, font, and other design styles.?
Images - <img> - All the images that we see on the page, are rendered through this image tag.
Font -? If the HTML page is using any font which is not a standard font available on any machines. It will be downloaded from the server.
Other media - Other media resources like video will be configured inside the HTML page with respective HTML tags.?
HTML provides a page layout that binds together all the above-mentioned resources required to render the page.??
Now let's look at how a browser renders the HTML page once it receives the response from the server.
The browser starts processing the HTML page line by line from the beginning till the end of the page. It starts rendering the HTML tags placed inside the <body> tag to show the page content. While rendering these HTML tags, when it encounters above mentioned resources. It makes a separate HTTP request to fetch those resources from the server.?
An important point to understand here is that these resources may not be just served from the same server. The HTML page may have resources that are pointing to other servers to download these resources. It is this mechanism that facilitates easy integration with different digital advertising services between publishers and advertisers.
The browser starts rendering the page the moment it starts receiving the HTML as a response from the server, sequentially, & line by line. It doesn’t wait for the entire HTML to get downloaded on the browser side. If you have witnessed internet browsing from the telephone dial-up era, you might recollect, the page being rendered slowly starting from the top to the end of the page.?
The last important aspect to understand is how navigation between different pages of a site is being facilitated through HTML pages.?
Navigation to another page from the page which has been rendered at present, is being facilitated through <a> anchor HTML tag. Page URL configured against any given anchor tag will take the user to that respective page once the user clicks on that anchor tag link. When you click on the link, you will notice the browser address bar URL gets changed to the one which has been configured against the anchor tag.?
The above-mentioned process repeats to display this new page all over again. Unless it's a SPA web application.
The important aspect to understand with respect to anchor tag is that the URL configured need not required it to be from the same site. It could point to any publicly available site URL. You can configure the anchor tag to open this new URL inside an altogether new tab.