How Browser Works: From Code to Pixels

We have seen what happens when we search for a domain in the browser, the whole DNS Resolution stuff and how we go from DNS catching to Authorative Sever in the networking series of this blog. Now, lets understand what happens after the browser has succesfully connected to the domain, and after the handshake has been done. The domain is sending its data to the browser. How does the browser render the domain on our desktop. Let’ see…

Before we dive deep into the internals, let us understand that our browser can only understand three things, HTML, CSS and JavaScript. If we want to communicate with browser these are only ways through which we can communicate. Everything is done through these three languages only. In doesn’t matter whether you wrote your code in TypeScript, Python or in any language they are converted into these three things only.

What is Parsing?

Suppose I say you add “2+2”, you will be like tushar its too simple its 4. But lets look at the computer’s view.

1. The "Computer's View"

   1. The Raw Input (What we see)

   To the computer initially, “2+2 “ is just a string of characters, no different than "A+B" or "Cat". For a computer it doesn’t mean anything, as a computer cannot directly establish relation when the raw input is presented to it.

   2. Tokenization (Breaking it up)

   To understand the meaning, computer first perform tokenization. The computer breaks the string into meaningful chunks called tokens.

   [NUMBER: 2], [OPERATOR: +], [NUMBER: 2]

   3. Parsing (Building the relationship)

   This is the step you were getting at. The parser takes those tokens and organizes them into a structure (usually a tree) that defines the rules of the math. The computer realizes: "The Plus sign is the parent, and the two numbers are its children."

   Why this matters

   Without parsing, the computer doesn't know order of operations.

   If you typed 2 + 3 * 4:

   • Without Parsing: The computer might just go left-to-right 2+3=5, 5*4=20. (Wrong)

   • With Parsing: It builds a tree where the multiplication 3×4 happens lower in the tree (higher priority), and that result is then added to 2. (Correct result: 14)

Browser Architecture

Let us take a look at how our HTML gets loaded into the browser. I will first explain all the components in the image then I will summarise the how everything is connected to each other.

1. The Entry Point(User Interface & Browser Engine):

   User Interface: This is the layout of the browser which we have discussed earlier and here the user enters the domain which he wants to search.

   • Step 1 (User enters URL): The process begins here when the user navigates to a site.

Browser Engine: Browser Engine acts as a medium between the User Interface and the Rendering Engine. It handles the input given by the user and pass it to the networking layer.

2. Networking & Data Retreival:

   The received URL through browsing engine is then passed to the networking where it uses multiple protocols to find the IP address of the domain, through which the browser can establish connection to the domain. It helps our browser to fetch resources to load our website.

   • Step 2 (Initiate Request): It handles internet protocols (HTTP/HTTPS) to request data.

   • Step 3 (HTTP Response): The Web Server responds with the raw resources: HTML documents, CSS stylesheets, and JavaScript files.

   • Cache: The diagram shows a cache within the networking layer. If a resource is already saved locally (cached), the browser skips the network request to load the page faster.

3. Rendering Engine:

   This is the heart of the browser, which converts the fetched data into display which can be shown to the user.

   1. Parsing(The ‘tree’ builders):

      1. HTML Parser:

         The engine receive the raw HTML Data Stream, it contains nothing but raw tags, which we need to convert it into the tree so that the computer can process it and create the layout of the page.

         The DOM (Document Object Model) Tree. This is the structural representation of the page content.

      2. CSS Parser:

         Browser does the same for CSS too. It builds the CSSOM (CSS Object Model) Tree, which acts like a map of all styles (colors, fonts, sizes) which is applied to the DOM Tree.

4. JavaScript Engine:

   This engine is responsible for executing javascript programs. And however in the diagram you will see that the engine points to the tree too, as JS also manipulates the html and css. Because JS can modify the page structure, the HTML parser often has to pause ("block") when it encounters a script tag until the JS finishes executing.

5. Construction & Layout:

   1. Render Tree Construction:

      The browser combines the DOM Tree (Content) and the CSSOM Tree (Style). It creates the Render Tree. Crucially, this tree only contains visible elements.

   2. Layout(Reflow):

      Once the Render Tree is built, the browser calculates the exact position and size of every object relative to the viewport. It uses the "Box Model" to determine where elements sit on the screen (x, y coordinates).

   3. Painting:

      The browser fills in the pixels. It applies colors, borders, shadows, and images to the calculated layout boxes.

      Now, the complete web pages are send to UI Backend for composition.

6. Storage & Output

   • Data Persistence (Brown Box): This represents data saved by the website on your local machine, such as Cookies (for login sessions) and Local Storage (for saving user preferences or offline data).

   • UI Backend (Grey Box): This underlying layer uses the operating system's user interface methods to draw basic widgets (like window frames or select boxes) and composite the final image.

   • Step 5 (Display Pixels): The final composited frame is sent back to the User Interface to be displayed on your monitor.

Summary of the Flow

1. URL Entered: User inputs address.

2. Request: Browser requests data from the server.

3. Response: Server returns HTML, CSS, and JS.

4. Parsing: HTML becomes DOM; CSS becomes CSSOM.

5. Render Tree: DOM + CSSOM are combined.

6. Layout: Geometry is calculated.

7. Paint: Pixels are drawn and displayed.

This is how the browser loads your webpage. Now, combine this with the DNS Resolution, so next time you go on any website you know that there is a complete complex series of operations which is performed within milliseconds to ensure that the particular web page reaches you.

#WebDevelopment #BrowserArchitecture #Frontend #HowTheWebWorks #Engineering #ComputerScience #DOM #100DaysOfCode #DevCommunity #Programming #ChaiCode