How the browser renders the website page
Let’s briefly understand when you open the browser and type in the web address like http://www.ugaoo.com. What all things happen behind the scene roughly, before you start seeing the website page being rendered in your browser.
- The very first thing browser does is to try and resolve the domain www.ugaoo.com to IP address/s.
- The browser then makes an HTTP request to that server behind that IP address with the URL path that you requested in the browser address bar.
- When a browser makes a request, it first opens a connection with the server. Then sends an HTTP request to the server.
- With the assumption that the server is capable to understand HTTP requests. The server will process the incoming request and respond appropriately based on the requested path.
- If the requested path is invalid or requires authentication. The server will respond with a relevant error or redirect you to the login page respectively.
- Assuming your requested path can be served by the server. The server will respond with an HTML page, which gets rendered in your browser.
- Once the entire response is sent from the server, it will close the connection opened by your browser. (NOTE: pay attention to the 3rd and 7th points. The HTTP protocol is said to be stateless. Closing the server connection once the entire response is sent is why it is called stateless.)
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.
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.
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 currently, 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.
