How Web Browsers Work

The Client-Server Model

At its core, the web operates on a client-server model.

• Client: This is the web browser you use (like Chrome, Firefox, or Safari) on your computer or phone. Its job is to request web pages and display them.
• Server: This is a powerful computer somewhere in the world that stores website files (code, images, videos, etc.). Its job is to listen for requests from clients and send back the appropriate files.

Our lesson today follows the conversation between your browser (the client) and a web server. This process can be divided into two main parts:

1. The Request: How the browser asks for a web page.
2. The Rendering: How the browser turns the server's response into a visual page.

Part 1: The Request - Asking for the Page

Everything starts when you ask your browser to go to a web page. You do this by typing a URL (Uniform Resource Locator), like https://www.google.com, into the address bar. But how does your browser know where to find google.com?

To understand this initial part of the journey, please watch a few short clips from the following video.

As the video explained, the request phase involves a few key steps:

1. DNS Lookup: Computers on the internet find each other using numerical IP addresses (e.g., 142.250.187.206), not human-friendly domain names (e.g., google.com). The Domain Name System (DNS) acts like the internet's phone book, translating the domain name you type into the correct IP address so the browser knows which server to contact.

2. TCP/TLS Handshake: Before sending the request, the browser must establish a reliable and secure connection with the server.

   • It first performs a TCP (Transmission Control Protocol) handshake. This is a three-step process (SYN, SYN-ACK, ACK) that ensures both the client and server are ready to communicate. Think of it as a formal "hello" to open a communication line.
   • For secure sites (https://), a TLS (Transport Layer Security) handshake happens next. This process encrypts the data that will be sent between your browser and the server, ensuring that no one can eavesdrop on your connection.

3. HTTP Request: With a secure connection established, the browser sends an HTTP (Hypertext Transfer Protocol) request. This is a formatted message that formally asks the server for the web page's content. A common type of request is a GET request, which simply asks to retrieve data.

Part 2: The Rendering - Displaying the Page

Once the server receives the HTTP request, it locates the necessary files (or generates them dynamically) and sends them back to the browser in an HTTP response. This response primarily contains the code for the website, most importantly an HTML file.

Now, the browser's main job begins: turning that code into the visual page you interact with. This is called the rendering process.

The following diagram provides a great visual summary of the entire flow.

To get a clear, step-by-step list of this process, the summary from the article "Exploring the browser rendering process" is an excellent resource.

Now that you have a list of the steps, let's watch a video that visualizes the most complex part: turning code into pixels.

Let's break down those core rendering steps:

1. Parsing (DOM and CSSOM Creation): The browser doesn't understand raw HTML and CSS code directly. It needs to parse it into a structure it can work with.

   • It parses the HTML to create the Document Object Model (DOM) tree. This is a tree-like representation of all the HTML elements on the page and their relationships (e.g., which elements are inside other elements). The DOM is the fundamental structure of the page.
   • It parses the CSS to create the CSS Object Model (CSSOM) tree. This tree represents the styles associated with each element in the DOM.

2. Render Tree Creation: The browser combines the DOM and CSSOM into a Render Tree. This tree includes only the elements that will actually be visible on the page. For example, elements hidden with a CSS rule like display: none; are not included in the Render Tree.

3. Layout (or Reflow): The browser walks through the Render Tree and calculates the geometry of each element—its exact size and position on the screen. This stage is like creating a blueprint for the page, determining where every box goes and how big it is.

4. Painting: Finally, the browser takes the blueprint from the layout stage and "paints" the pixels to the screen. It fills in the colors, text, images, and borders for every element, creating the visual representation you see.

Conclusion

And that's the entire journey! What seems like an instantaneous event is actually a rapid and complex sequence of steps.

To summarize, we've covered two main phases:

• The Request: Your browser finds the correct server through a DNS lookup, establishes a secure TCP/TLS connection, and sends an HTTP request for the page content.
• The Display (Rendering): The browser receives the server's response, parses the code to build the DOM and CSSOM trees, combines them into a Render Tree, calculates the Layout, and finally Paints the pixels to your screen.

Understanding this process is the first step toward mastering web development. You now have a mental model of what the browser is doing with the code you'll soon be writing.

In our next lesson, we will dive into the three core technologies that the browser uses to build pages: HTML, CSS, and JavaScript. We'll explore the specific role each one plays in this rendering process.