# How a Browser Works: A Beginner-Friendly Guide to Browser Internals Ever thought What happens inside a browser after you type a URL and press Enter? Well, today you’ll learn how a browser works internally, no super technical stuff will be thrown at you, it will be an smooth ride with diagrams and mental models. Starting with the Browser's Architecture. ## Browser Architecture This is an overview diagram of the Browser Architecture. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769442838385/b38fe337-84cc-4d43-a6bb-8dce68095b82.png align="left") ### User Interface : This is all that you see and interact with on the Browser Window. * Search / Address bar * back & forward buttons * Tabs * Bookmarks * DevTools UI ### Browser Engine : This is the middleware / coordinator / traffic controller between User Interface and Render Engine. It’s job is to : * Handle user interactions * Tell render engine what to load * Manages navigation & history * Instruct the rendering engine what to load * Coordinate UI, networking, Renderer and storage ### Render Engine : This is where the heavy lifting happens. It : * Parses HTML & CSS * Builds the DOM & CSSOM * Combines them into a Render Tree * Makes Layout / calculates sizes & positions * Generates paint instructions Examples: * Blink (Chrome) * Gecko (Firefox) * Webkit (Safari) ### Browser Engine VS Render Engine : The main difference > Browser engine tells the render engine what to render(display), > > Where as Render engine works on the actual rendering logic. ### Networking : Handles: * HTTP/HTTPS * DNS resolution * Fetching of HTML, CSS, JS, images, videos ### JavaScript Interpreter : it : * Executes JS * Modifies DOM * Modifies CSSOM * Handles events Examples: * V8 engine (chrome) * SpiderMonkey (Firefox) ### UI Backend : This component : * Takes the paint instructions form rendering engine * Renders it on the screen by using OS graphics APIs and the GPU ### Data Persistence : Contains: * Cookies * LocalStorage * IndexedDB * Cache * History Used by: * Browser engine * JS Interpreter * Networking ## Rendering Pipeline ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769442794357/43978d92-6624-4d28-8aaa-0adee74ff094.png align="left") ### HTML Parser : The browser cannot wark directly with raw HTML text. It has to be converted into something that browser can do calculations and perform render logic on. The HTML parser solves this by making a tree out of the HTML file which is known as DOM(Document Object Model). **Steps:** 1. It breaks HTML into tokens 2. Converts tokens into nodes 3. Builds the DOM tree using HTML specification rules This is a simple DOM tree example ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769442811290/57961fd4-f48f-4951-8990-bebd6072f90f.png align="left") When this parser encounters a `