<![CDATA[How a Browser Works ?]]>https://how-a-browser-works-by-anunay.hashnode.devRSS for NodeSun, 06 Sep 2026 00:10:53 GMT60<![CDATA[How a Browser Works: A Beginner-Friendly Guide to Browser Internals]]>https://how-a-browser-works-by-anunay.hashnode.dev/how-a-browser-works-a-beginner-friendly-guide-to-browser-internalshttps://how-a-browser-works-by-anunay.hashnode.dev/how-a-browser-works-a-beginner-friendly-guide-to-browser-internalsFri, 30 Jan 2026 14:57:33 GMTWhat Happens After I Type a URL and Press Enter?

This is one of the most important questions in web development. You type a URL, press Enter, and a webpage appears. But behind the scenes, the browser is doing a lot of work.A browser is not just something that opens websites. It is a complex system of components that work together to turn code into pixels on your screen.

What Is a Browser, Really?

A web browser is a program that fetches files from the internet (HTML, CSS, JavaScript) , Understands those files and then convert them into a visible webpage you can interact with. Examples of browsers: Chrome, Firefox, Edge, Safari. All of them follow the same basic process, even if their internals differ slightly.

Main Parts of a Browser

At a high level, a browser is made of several key parts:

  1. User Interface (UI)

  2. Browser Engine

  3. Rendering Engine

  4. Networking

  5. JavaScript Engine

User Interface (UI)

This is the part you directly interact with. It includes has Address bar, Back/Forward buttons, Refresh Buttons, Tabs. The UI takes your input (like typing a URL) and passes it to the browser engine.

Browser Engine vs Rendering Engine

  • Browser Engine → It acts like a coordinator.

  • Rendering Engine → It draws the webpage.

The browser engine tells the rendering engine what content to load and display.

Networking: Fetching Website Files

Once you press Enter the browser sends a request to the server and then the server responds with files of HTML, CSS, JavaScript, Images. This fetching of data happens through the browser’s networking layer.

HTML Parsing and DOM Creation

When the browser receives HTML, it does not display it immediately. Firstly, it parses the HTML.

What Is Parsing?

Parsing means breaking something into smaller meaningful pieces.

Simple Math Example

2 + 3 * 4

The computer doesn’t see this as text. It breaks it into a structure , that structure helps it understand its meaning.

   +
  / \
 2   *
    / \
   3   4

HTML → DOM

Similarly, HTML is broken down into a tree structure called the DOM (Document Object Model).

<body>
  <h1>Hello</h1>
  <p>Welcome</p>
</body>

It is similar to:

body
 ├── h1
 └── p

CSS Parsing and CSSOM Creation

CSS is also parsed by the browser. The browser creates another tree-like structure called the CSSOM (CSS Object Model).

Example

p {
  color: blue;
}

This tells the browser which element to style and what styles do we have to apply to them.

How DOM and CSSOM Come Together

The browser combines DOM for structures and CSSOM for styles. To create something called the Render Tree.

Render Tree

The render tree contains only visible elements and has information about how the elements should look.

Layout (Reflow), Painting, and Display

Once the render tree is ready, the browser performs these steps:

1. Layout (Reflow)

Calculates size and position of each element and decides where the elements should go on the screen.

2. Painting

It is used to fill coolers and to draw text, borders, images.

3. Display

Pixels are shown on the screen

Full Browser Flow

]]>