# How a Browser Works: A Beginner-Friendly Guide to Browser Internals ## First Question **What actually happens after I type a URL and press Enter?** A lot more than “the website opens”. A browser is not one thing. It’s a **collection of parts working together** to turn code into pixels on your screen. --- ## What a Browser Actually Is A browser is a **software program that:** * Fetches files from the internet (HTML, CSS, JS, images) * Understands those files * Converts them into a **visual page** * Lets users interact with it In short: > **Browser = code reader + painter + traffic manager** --- ## High-Level Parts of a Browser Think of a browser like a small factory. ![Image](https://beehiiv-images-production.s3.amazonaws.com/uploads/asset/file/e525ea1b-f275-45e2-bd83-cb6725583b22/bb4ed1cf-6143-48b5-b9af-60f65d921e68_500x339.png?t=1651893384 align="left") ![Image](https://media2.dev.to/dynamic/image/width%3D800%2Cheight%3D%2Cfit%3Dscale-down%2Cgravity%3Dauto%2Cformat%3Dauto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe1jalr50iq0qbcljula7.png align="left") ![Image](https://files.codingninjas.in/article_images/what-is-a-web-browser-2-1635103986.webp align="left") ### Main Parts (High Level) 1. **User Interface (UI)** – what you see and click 2. **Browser Engine** – connects UI with the engine 3. **Rendering Engine** – turns code into visuals 4. **Networking** – fetches files from the internet 5. **JavaScript Engine** – runs JavaScript code You don’t need to remember names yet. Focus on the **flow**. --- ## User Interface (UI) This is the visible part of the browser. Includes: * Address bar * Tabs * Back / Forward buttons * Refresh button UI’s job is simple: > Take user input and show output. --- ## Browser Engine vs Rendering Engine (Simple) This sounds complex, but it’s not. * **Browser Engine** Acts as a **manager** It tells the rendering engine *what to load and when* * **Rendering Engine** Acts as a **builder + painter** It reads HTML/CSS and draws the page Popular rendering engines (name level only): * Chromium * Gecko No deep dive needed. --- ## Networking: How Files Are Fetched When you press Enter: 1. Browser sends a request to the server 2. Server responds with files: * HTML * CSS * JavaScript * Images This is handled by the **networking layer**. Think of it as: > Browser ordering food, server delivering items. --- ## HTML Parsing and DOM Creation The browser **reads HTML from top to bottom**. This process is called **parsing**. While parsing, the browser builds something called the **DOM**. ### What Is the DOM? DOM = **Document Object Model** It is a **tree structure** representing HTML. ![Image](https://www.w3schools.com/js/pic_htmltree.gif align="left") ![Image](https://www.w3schools.com/whatis/img_htmltree.gif align="left") ![Image](https://i.sstatic.net/kBF3j.png align="left") Example: ```html

Hello

World

``` Becomes a **tree**, not text. > DOM helps the browser understand **relationships** between elements. --- ## CSS Parsing and CSSOM Creation CSS is parsed separately. Browser builds the **CSSOM** (CSS Object Model). ![Image](https://miro.medium.com/0%2AFp3mesmVsWB7z0OD align="left") ![Image](https://res.cloudinary.com/dcxnnco0b/image/upload/w_728%2Cf_auto%2Cq_auto%2Cdpr_auto/v1729886519/cssdom_k1fr2i.webp align="left") ![Image](https://web.dev/static/articles/critical-rendering-path/render-tree-construction/image/dom-cssom-are-combined-8de5805b2061e.png align="left") CSSOM answers: * Which styles apply * To which elements * With what priority --- ## DOM + CSSOM → Render Tree DOM and CSSOM are combined to create the **Render Tree**. ![Image](https://web.dev/static/articles/critical-rendering-path/render-tree-construction/image/dom-cssom-are-combined-8de5805b2061e.png align="left") ![Image](https://media2.dev.to/dynamic/image/width%3D800%2Cheight%3D%2Cfit%3Dscale-down%2Cgravity%3Dauto%2Cformat%3Dauto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F56cdizmlhcvpwgjx55k7.png align="left") ![Image](https://pbs.twimg.com/media/FUqUKK1UYAUjdVq.jpg align="left") Important: * Only **visible elements** are included * `display: none` elements are ignored Render Tree = *what actually needs to be drawn* --- ## Layout (Reflow) Now the browser calculates: * Width * Height * Position This step is called **layout** or **reflow**. > “Where should everything go?” --- ## Painting and Display After layout: 1. Browser paints colors, text, borders, images 2. Everything is drawn onto the screen ![Image](https://webperf.tips/static/d77eb220c5dd10181dc361c4ff0051da/906b5/BrowserRenderingPipeline17.png align="left") ![Image](https://substackcdn.com/image/fetch/%24s_%2101rE%21%2Cf_auto%2Cq_auto%3Agood%2Cfl_progressive%3Asteep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff8d3d92c-f0bf-44b8-a24e-4960b8dd63b5_2840x1184.png align="left") ![Image](https://webperf.tips/static/4e73c9992ce3b9177bcc80a2113b3138/906b5/BrowserRenderingPipeline01.png align="left") Final result: > **Pixels on your screen** --- ## Very Basic Idea of Parsing (Simple Example) Parsing means **breaking something into meaningful pieces**. Example: ```plaintext 2 + 3 × 4 ``` Parser turns it into a tree: * Multiply first * Then add Same idea with HTML: * Tags * Nesting * Meaning ![Image](https://runestone.academy/ns/books/published/pythonds/_images/meParse.png align="left") ![Image](https://runestone.academy/ns/books/published/pythonds/_images/nlParse.png align="left") ![Image](https://www.krivalar.com/picture/tree/exp/exp.jpg align="left") --- ## Full Browser Flow (Big Picture) ![Image](https://media2.dev.to/dynamic/image/width%3D800%2Cheight%3D%2Cfit%3Dscale-down%2Cgravity%3Dauto%2Cformat%3Dauto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fnmgeburj0q5o1vazjkxr.png align="left") ![Image](https://miro.medium.com/v2/resize%3Afit%3A2000/1%2AAjwXe0spMClgE9KhBxuB1Q.png align="left") ![Image](https://i.sstatic.net/nxhk6.jpg align="left") Flow summary: 1. URL entered 2. Files fetched 3. HTML → DOM 4. CSS → CSSOM 5. DOM + CSSOM → Render Tree 6. Layout 7. Paint 8. Display --- ## Important Reassurance for Beginners * You **do not** need to remember everything * Understanding the **flow** is enough * These concepts will repeat naturally in: * CSS * JavaScript * Performance topics > If the flow makes sense, you are learning correctly. --- ## Key Takeaway A browser is not magic. It’s a **well-organized pipeline** that turns text files into visuals.