What happens when you type google.com in the browser

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

Step 1: URL Parsing & Server Lookup

URL Parsing

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,

1. protocol used - HTTPS vs HTTP
2. Domain name - google.com
3. URL path - here /

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 

Server Lookup

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

1. Browser-level caching,
2. Search for OS-level caching through the hosts file
3. Local DNS caching - Generally provided by ISP (Internet Service Provider)
4. DNS level lookup - <DNS IP>:53

Note: 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.

Step 2: Setup TCP/IP Communication with the Server & Fetch Webpage

TCP/IP & TLS Connection

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. 

Fetch Webpage GET /google.com

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.

Step 3: HTML Page Parsing & Rendering on Screen

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   

1. HTML Parsing

At this step 3 major processing happened on the HTML page by the browser  

HTML Parsing

Browser starts parsing the HTML page starting from top to bottom, in order to identify the HTML tokens.

Loading JS files, Executing JS

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>

Loading CSS files

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">

2. Rendering Tree

Document Object Modal (DOM)

Browser creates the DOM after parsing the HTML page, DOM represents the HTML elements with properties in the hierarchical format.

CSS Object Object Modal (CSSOM)

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.

3. Layout & Painting on Screen

Define Layout

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.

Painting on Screen

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.