Details about how the browser works behind the scenes and what happens when you type google.com in the browser, starting from communication to the webpage rendering.
Anuj Sharma
Last Updated Feb 13, 2025
Advertisement
In order to understand the browser functionality, Its important to know what happens when you type google.com in the browser search bar. This overall process, primarily includes client-server communication and webpage rendering/painting in the browser. Also it's a very frequently asked frontend interview question at all the levels.
In this post, we will briefly describe the overall process into 3 major steps, here are those
When the user types google.com in the browser search text box and hits enter, the browser parses the overall URL to identify 3 things,
HTTPS/HTTP identification first happens at the browser caching level where the browser already knows, based on the caching supported protocols for the provided domain, for example, google.com always servers with HTTPS.
If the protocol is HTTPS, the communication happens on PORT 443
, in case of HTTP communication happens on PORT 40
In the next part, Browser tries to look for the IP address associated with the domain name. The search happens through various caching levels starting from
hosts
fileNote: if on the client side Firewall exists it authorizes the request before sending it to the server.
At the end of this step, browser knows about the IP address through which it needs to establish the communication.
HTTP is the part of TCP/IP protocol, so when the IP address of the domain got identified, browser tries to establish TCP/IP connection with the server. This communication starts with TCP/IP handshake.
When the TCP/IP (Transmission Control Protocol/ Internet Protocol) connection is established with the server, a request using SSL or TLS (Transport Layer Security) is sent to the server. This established a secure tunnel between browser and server for secure encrypted communication.
Note: In summary, browser and server exchange the signed SSL certificates in order to established the encrypted communication.
Once TCP connection got established, browser sends the HTTP get call the URL - GET http://www.google.com
which returns the webpage code in the GET response.
Once the HTML page got as part of the GET response, now the next job of the browser is to render that webpage into the browser window. This involves below steps
At this step 3 major processing happened on the HTML page by the browser
Browser starts parsing the HTML page starting from top to bottom, in order to identify the HTML tokens.
As soon as browser hits the script
element, if it's an inline script it executes the javascript. In case of external script, it fetches the JS resources from the mentioned src
URL and execute the same. Execution of the script depends on the async
, defer
parameters.
// Internal JavaScript Linking
<script> inline javascript </script>
// External JavaScript Linking
<script defer src="script.js"></script>
Similar to JS files, as soon as browser hits the link
element, it loads the external CSS files from the href
URL.
<link rel="stylesheet" href="styles.css">
Browser creates the DOM after parsing the HTML page, DOM represents the HTML elements with properties in the hierarchical format.
Browser creates CSSOM after parsing the CSS attached to the HTML page, inline or through external URLs
Browser creates Render Tree
after merging the DOM and CSSOM, which will going to be render on the browser viewport.
After generating the render tree, browser define the layout of the webpage as per associated DOM & CSSOM. Browser uses the Box Modal concept to define the layout the elements.
This is the step, where changes can impact the Cumulative layout shift (CLS) core web vital. Every time any layout shift happened calculation of the new layout and the painting step happens which is a costly operation for the browser.
In this last step browser, paints the pixels on the screen as per the layout, defined colors, and other properties like z-index. After this step the whole webpage appeared on the browser viewport.
Advertisement
Advertisement
Anuj Sharma
Last Updated Jan 5, 2025
A comprehensive explanation about using javascript:void(0) in javascript. When to use javascript:void(0) and how it works with examples of using it with anchor tag.
Anuj Sharma
Last Updated Jan 2, 2025
Understand important web authorization techniques to enhance role-based authentication for any web application with popular techniques like Session & JSON Web Token (JWT)
Anuj Sharma
Last Updated Jan 9, 2025
Go through different ways to display dates using javascript date object. It covers examples of date object usage to understand the main concepts of javascript date object.
Anuj Sharma
Last Updated Jan 29, 2025
Understand the difference between HTTP/2 vs HTTP/1.1 based on the various parameters, which helps to understand the improvement areas of HTTP/2 over HTTP 1.1
Anuj Sharma
Last Updated Jan 28, 2025
An Interview-focused explanation of Promise Polyfill in JavaScript which helps to understand both Functional and ES6 custom promise implementation.
Anuj Sharma
Last Updated Dec 10, 2024
A brief explanation of Cross-Origin Resource Sharing (CORS) concept to enable client application accessing resources from cross domain and HTTP headers involved to enable resource access.
© 2024 FrontendGeek. All rights reserved