# How a Browser Works: A Beginner-Friendly Guide to Browser Internals

# What a browser actually is?

There are many parts of browser which handles the rendering process of a website ( we will understand what rendering actually means ahead of our blog ).

These parts are

1. **User Interface (UI)**
    
2. **Networking**
    
3. **Browser Engine**
    
4. **Rendering Engine**
    
5. **JavaScript Engine**
    
6. **Data Storage**
    

By understanding these parts of browser we can understand how a browser works internally and exactly a browser is. So lets begin with UI.

## User Interface (UI)

Browser gives a a user interface for following things

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769508114892/636309cb-8873-4ce0-8028-676878d4c7d5.png align="center")

and much more….

## **Networking**

Browser networking done

* HTTP requests like GET, POST, PUT, DELETE
    
* DNS Networking
    
* DNS resolution
    
* Transport Layer Protocols
    

You can know more about it by reading my blogs. [HTTP and TCP](https://skullcoder.hashnode.dev/tcp-vs-udp-when-to-use-what-and-how-tcp-relates-to-http) , [DNS resolution](https://skullcoder.hashnode.dev/how-dns-resolution-works), [TCP](https://skullcoder.hashnode.dev/tcp-working-3-way-handshake-and-reliable-communication)

## **Browser Engine**

The browser engine coordinates the rendering engine and JavaScript engine to process HTML, CSS, and JavaScript.

1. **Rendering engine**
    
    They are used to Understand HTML, CSS. These engines are Blink, Geko, Webkit.
    
2. **JavaScript engine** -
    
    They are used to Understand Js. These engines are V8, SpiderMonkey, JavaScriptCore.
    

### Why browsers need a engine ?

Browser Engine coordinates with Rendering engine and JavaScript Engine.

The rendering engine renders HTML and CSS, while the JavaScript engine executes JavaScript that can modify the DOM and CSSOM.

Let us know more about Rendering engine and JavaScript engine.

## Rendering Engine

Rendering Engine like Blink, Geko parse the HTML and CSS and makes its DOM and CSSOM respectively.

### What does parsing HTML and CSS means?

When you give computer to perform 2 + 5×3,

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769509962276/bae46761-ce33-4e5f-a478-a9b0a4ef323f.png align="center")

computer first parse it makes a tree of it and then compute because computer cant understand text just like HTML and CSS.

Rendering engine parse **HTML → DOM Tree** and **CSS → CSSOM Tree**

<mark>Computers cannot work directly with raw text meaningfully.</mark>

They need:

* hierarchy
    
* rules
    
* relationships
    

Parsing gives:

* parent-child structure
    
* properties
    
* meaning
    

## **JavaScript Engine**

JavaScript engines like V8 parse JavaScript into an AST, compile it, and then execute it.

JavaScript Engines parse **JavaScript and make AST (Abstract Syntax Tree).**

<mark>JavaScript → AST</mark>

## Matching DOM and CSSOM

After DOM and CSSOM are create, browser matches the DOM and CSSOM like Takes each DOM node and Finds which CSS rules apply to it.

So after combining DOM and CSSOM a Render tree is created.

<mark>DOM + CSSOM → Render Tree</mark>

## Layout (reflow), painting, and display

After Creating rendering Tree this flow occurs

<mark>Rendering Tree → Layout → Painting → Display</mark>

Let us understand these 3 now.

### Layout

As you can guess it computes the Layout like width, height of an object. Font size of texts. Gaps between two objects, etc.

### Painting

Yes its does all work of colors, background image, shadows, etc.

### Display

In this, the browser uses the GPU to combine painted layers and show the final pixels on the screen.