Blog/NotesConcept

What happens when you type google.com in the browser

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.

Expert

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

what happens when you type google.com in the browser - FrontendGeek.com

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.

What happens when you type google.com in browser - frontendgeek.com

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.

Advertisement

Advertisement


Share this post now:

Flaunt You Expertise/Knowledge & Help your Peers

Sharing your knowledge will strengthen your expertise on topic. Consider writing a quick Blog/Notes to help frontend folks to ace Frontend Interviews.

Other Related Blogs

What is javascript:void(0) and How it Works?

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.

Understand JavaScript Date Object with Examples (for JavaScript Interviews)

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.

HTTP/2 vs HTTP/1.1: What's the Key Difference?

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

Promise Polyfill in JavaScript - Step by Step Explanation

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.

What is CORS ? Cross-Origin Resource Sharing Explained [For Interviews]

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.

Explained Web Authorization Techniques - Session & JWT

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)

FrontendGeek
FrontendGeek

© 2024 FrontendGeek. All rights reserved