# How a Browser Works : A Beginner-Friendly Guide to Browser Internals ### What Really Happens When You Type [`blog.prakashtsx.me`](http://blog.prakashtsx.me) in Your Browser? > From URL → code → pixels (explained visually for beginners) ## A Simple Question to Start With You open your browser, type: [`blog.prakashtsx.me`](http://blog.prakashtsx.me) …and press **Enter**. Within milliseconds, blog appears. But what *actually* happened inside the browser during that tiny moment? Let’s Understand : ## What a Browser Actually Is (Beyond “It Opens Websites”) A browser is **not just a website opener**. When you visit [`blog.prakashtsx.me`](http://blog.prakashtsx.me), your browser becomes: * A **network client** (talks to servers) * A **file downloader** (HTML, CSS, JS) * A **parser** (understands code) * A **layout planner** * A **painter** (draws pixels) ***In simple words:*** > **A browser converts text files into a visual experience.** ## Main Parts of a Browser (High-Level Overview) Think of the browser as a **team of components working together**. ### Main components: * User Interface * Browser Engine * Rendering Engine * Networking * JavaScript Engine * Data Storage ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769776290776/07f2d41f-1355-46bf-a09a-b0f8f9cd02e4.png align="center") ## User Interface (What You See) This is the visible part of the browser: * Address bar (where you type [`blog.prakashtsx.me`](http://blog.prakashtsx.me)) * Tabs * Back / Forward buttons * Refresh button ***Important:*** The UI **does not render the website**. It only sends instructions to the browser engine. ## Browser Engine vs Rendering Engine (Simple Difference) This confuses many beginners, so let’s simplify. ### Browser Engine * Acts like a **manager** * Connects UI with the rendering engine * Controls page loading ### Rendering Engine * Converts **HTML + CSS into pixels** * Builds DOM, CSSOM, Render Tree Examples (name-level only): * Chrome → Blink * Firefox → Gecko *One manages. One draws.* ## Networking: How [`blog.prakashtsx.me`](http://blog.prakashtsx.me) Is Fetched After pressing Enter: 1. Browser reads the URL 2. DNS converts domain → IP address 3. Browser sends an HTTP/HTTPS request 4. Server responds with: * HTML * CSS * JavaScript * Images, fonts At this stage, the browser has **raw files**, not a page. ## HTML Parsing → DOM Creation Let’s say blog sends HTML like: ```plaintext

Hello from blog.prakashtsx.me

``` The browser: * Reads HTML line by line * Breaks it into tokens * Builds a tree structure This tree is called the **DOM (Document Object Model)**. ### DOM Analogy Think of DOM as a **family tree**: * `html` → parent * `body` → child * `div` → grandchild ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769776547307/f141c751-28d4-40b0-bbcb-4b1064a047ad.png align="center") ## CSS Parsing → CSSOM Creation CSS is processed separately. Example: ```plaintext body { font-size: 16px; } div { color: blue; } ``` The browser: * Tokenizes CSS * Applies rules * Handles inheritance This creates the **CSSOM (CSS Object Model)**. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769776592957/1cf7ec09-6df8-4098-bb17-48562d66e199.png align="center") ## How DOM and CSSOM Come Together Now the browser combines: * DOM (structure) * CSSOM (styles) To form the **Render Tree**. ### Render Tree: * Contains only **visible elements** * Includes layout + style info *Elements like* `display: none` *are excluded.* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769776640100/5f2befcd-1f94-459f-aee3-fd45ca60c9cc.png align="center") ## Layout (Reflow): Deciding Positions Now the browser calculates: * Width * Height * Position (x, y) *This step is called* ***Layout*** *or* ***Reflow****.* Reflow happens again if: * Window resizes * Content changes * Font size changes ## Painting and Display ### Painting The browser paints: * Text * Colors * Borders * Images ### Compositing & Display * Layers are combined * Pixels are pushed to the screen 🎉 You now see [**blog.prakashtsx.me**](http://blog.prakashtsx.me) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769776885130/cc14b335-cbaa-4cfb-b11d-2f4975e2300d.png align="center") ## What Does “Parsing” Mean? Parsing means: > **Breaking something into meaningful structure** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769776983497/f9cff355-84d0-4d54-b008-ee94d2cf7aa0.png align="center") Example: ```plaintext 2 + 3 * 4 ``` Parser understands: * `*` has higher priority * Builds a tree * Evaluates correctly --- ### **Want More…?** I write articles on [**blog.prakashtsx.com**](https://blog.prakashtsx.me/) and also post development-related content on the following platforms: * [**Twitter/X**](https://x.com/prakashtsx) * [**LinkedIn**](https://www.linkedin.com/in/prakashtsx)