# A Beginner-Friendly Guide to Browser Internals

## ***What happens after someone type a URL and press Enter ?***

When we hit enter after typing the URL, the browser has an engine that grabs the url from the address bar .It first checks the memory(cache) for a quick reply if it doesn’t found the response the browser networking layer spring into action. It is like sending a courier to a warehouse(the server) which is very far way. The courier says , ‘Hey i want the files for [yahoo.com](http://yahoo.com)’ .The warehouse upon getting this request packs three type of boxes and send them back to the client.

*   HTML: Skeleton (Blueprint)of the webpage
    
*   CSS : The paint and decorating samples
    
*   Javascript: The wiring and plumbing
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771043982933/d2941de1-903c-49b5-84f4-931b0cc9dc2d.png align="center")

## **Main parts of a browser :-**

A Browser translate raw web files ( HTML ,CSS ,Javascript) into a picture that has behavior we see and click. They oragnize fetching data ,parsing it into trees ( DOM trees / CSSOM tree) ,computing layout and pianting layers.

Breakdown of what browser does :-

*   **Fetching**: Grabs HTML, CSS, and images from the web, like downloading ingredients for a recipe
    
*   **Parsing Trees**: Breaks HTML into a DOM tree (page structure) and CSS into a CSSOM tree (styling rules), forming the blueprint.
    
*   **Layout**: It figures out exact positions and sizes for every element, like arranging furniture in a room.
    
*   **Painting**: It draws pixels onto screen layers for smooth visuals and animations.
    
*   **Process Isolation**: Runs UI, tabs, and plugins in isolated "sandboxes" to protect our system from malicious sites
    

Main Component :

1.  **User Interface**: It includes address bar for URLs, tabs for multiple pages, back/forward buttons, bookmarks, and refresh/stop controls.
    
2.  **Browser Engine**: It is the manager. It coordinates actions between the UI and the Rendering Engine. When we click "Refresh button" the Browser Engine tells the other parts to get to work.
    
3.  **Rendering Engine**: It is the artist . Its sole job is to display the content. If we use Chrome/Edge, this is **Blink**; if you use Safari, it’s **WebKit**; for Firefox, it’s **Gecko**.
    
4.  **Networking**: Handles HTTP/HTTPS requests to fetch files
    
5.  **JavaScript Engine**: Executes JS code (e.g. V8 in Chrome ,**SpiderMonkey** in Firefox)
    
6.  **Storage/Security**: Manages cookies, cache, and sandboxing
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771043238680/7484210c-bce1-4bdb-862f-f6ef5a5816f7.webp align="center")

## **Networking: how a browser fetches HTML, CSS, JS**

A Browser fetch HTML, CSS, and JS through a streamlined networking process starting with a URL input, resolving it via DNS, and sending HTTP requests over TCP connections.

Steps in the fecthing:

*   **DNS Lookup**: Converts domain (e.g., [**google.com**](http://google.com) , [yahoo.com](http://yahoo.com)) to an IP address for server location
    
*   **TCP Handshake**: Establishes a reliable,secure connection with the server .
    
*   **HTTP Request**: Sends a GET request with headers (e.g., User-Agent, Accept) specifying HTML/CSS/JS needs; no body for GET is sent
    
*   **Server Response**: Returns status (e.g., 200 OK), headers (Content-Type: text/html), and resource body.
    
*   **Resource Handling**: Browser parses HTML firstly, then discovers and fetches linked CSS/JS in parallel via subsequent requests; caches for reuse.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771044459458/57d03d7d-f7cc-4ba8-989e-3d6045eb78f2.webp align="center")

## **HTML Parsing and DOM**

HTML is parsed token-by-token into the Document Object Model (DOM), a tree of nodes representing elements, attributes, and text.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771044216639/1b487557-4ee3-4691-84ba-94b1f6b1254d.gif align="center")

## **CSS Parsing and CSSOM**

CSS rules are parsed into the CSS Object Model (CSSOM), a tree of style rules matched to DOM nodes by selectors. This enables computed styles per element in the browser.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771045187859/3b83f150-3e4b-4876-8d77-0f3f709b6157.png align="center")

## **DOM + CSSOM Merge**

The browser combines DOM (content) and CSSOM (styles) into a render tree, filtering invisible elements (e.g., display : none ) and including only styled, visible nodes. This render tree drives layout (positioning) and paint (pixel rendering).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771045374708/b05fe999-fe71-468c-a381-bf60fd3d70db.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1771045401614/22f3724a-5386-47e6-9607-8386d135c0ef.png align="center")