Guide: Understanding Browser Internals

Now we will see how a browser is actually able to show a website to us. In computer science, we often have a habit of using complex or rich terms for things that are actually very simple. So instead of saying how a browser shows a website, we usually say how a browser renders a website. In this section, we will understand how a browser renders things in a simple and beginner-friendly way.

Browser is not just a tool to open websites, but a software system whose job is to request resources from servers, process them, and turn them into something humans can see and interact with. This helps beginners reset their mental model early.

Now, coming to the first step, whenever we type a website name in the browser’s URL bar and press Enter, the browser does not immediately know where that website lives. The first thing that happens is a DNS query. This DNS query goes out and comes back with the IP address of the server where the website is hosted. If you are not already aware of how a DNS query works, you can go through my separate blog on DNS, which explains this part in detail.
Link to DNS Query Blog: DNS Resolution Blog

Once the DNS query is completed, the browser now has the IP address of the server. After this, the browser makes an HTTP request over TCP to that server. The server then responds with data, and this data mainly contains HTML, CSS, and JavaScript. These three things together are what the browser needs in order to display the website.

Now the question arises of how the browser is able to process all this data efficiently and display a webpage on the screen. A browser is not just a single piece of software but a collection of different components working together. First, there is the user interface, which includes things like the address bar, tabs, back and forward buttons, and the visible screen area where the webpage appears.

Behind the user interface, there is something called the browser engine. The browser engine acts as a coordinator between the user interface and the rendering engine. It controls how actions from the UI are passed to the rendering engine and how the rendered content is shown back on the screen.

Inside the browser, there are mainly three important engines. The first is the browser engine, which we just discussed. The second is the rendering engine, and the third is the JavaScript engine. The rendering engine is responsible for understanding and processing HTML and CSS. The JavaScript engine is responsible for executing JavaScript code. In Chrome, the most popular JavaScript engine is V8.

When the server response is received, the rendering engine starts working on the HTML and CSS. At this stage, something called parsing happens. Parsing simply means taking the raw HTML and CSS text and converting it into a structured format that the browser can understand. This structure follows specific rules and looks like a tree.

The result of HTML parsing is called the Document Object Model, or DOM. Similarly, the result of CSS parsing is called the CSS Object Model, or CSSOM. These object models are internal representations that the browser uses to understand the structure of the page and how it should look.

While the HTML is being parsed, if the browser encounters JavaScript linked inside the HTML, that JavaScript is passed to the JavaScript engine for execution. JavaScript can interact with the DOM and change it, which means the structure of the page can be modified even after it has been initially created.

Once both the DOM and CSSOM are ready, they are brought together. This step allows the browser to figure out which styles apply to which elements. After this, the browser moves on to layout. During layout, the browser calculates the size and position of each element on the page. This step is also commonly referred to as reflow.

After layout is complete, the browser starts painting. Painting means filling in pixels, colors, text, images, and borders based on the calculated layout. Once painting is done, the final result is displayed on the screen. This is the point where the webpage becomes visible to the user.

If the DOM changes later, for example due to JavaScript updates, this internal process can happen again. The browser may need to recalculate layout, repaint parts of the page, and then update the display. This entire flow is how a browser renders a webpage from the moment you press Enter to the moment you see content on the screen.

Note that you do not need to memorize all the steps. it’s just that you should have a basic idea about the overall workflow.