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

**What a browser actually is?**

Beyond opening websites, a browser is actually a complex software application that functions as an operating system within an operating system. It acts as an interpreter, a security agent, and a developer platform that renders raw, unrecognizable code into the interactive digital world you experience.

**Main parts of a browser**

Main Parts of a browser

**UI (User Interface)**\- address bar, back button, forward button, refresh button, etc.

**Rendering Engine**\- displays HTML and CSS

**Browser Engine**\- manages UI (or User Interface) and rendering

**Networking Component**\- handles requests and data

**Data Persistence part**\- saves history and cookies

**User Interface: address bar, tabs, buttons**

User Interface (UI) components like address bars, tabs, and buttons are fundamental elements in digital design that facilitate interaction.

**Address Bar also called URL bar:**

Displays the current URL and allows users to enter a new website address to navigate directly to it.

**Tabs:**

Organize content into separate, switchable views within a single window, enabling navigation between related contexts without reloading the entire page.

**Buttons**

Interactive elements that trigger specific actions example, submit form, close window

**Browser Engine vs Rendering Engine**

**Browser Engine**\- It’s function is to manage UI (or User Interface) and rendering.

**Rendering Engine**\- It displays HTML(Hyper Text Markup Language), JS(JavaScript) and CSS (Cascading Style Sheets).

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

When you type a website address in a browser, the browser first uses DNS to find the server’s IP address. Then it creates a connection with the server using TCP and HTTPS. The browser sends an HTTP request asking for the HTML file. The server replies with the HTML content. While reading the HTML, the browser finds links to CSS and JavaScript files. It sends separate requests to download them. CSS is used to style the page, and JavaScript adds interactivity. Finally, the browser combines HTML, CSS, and JavaScript to render and display the complete webpage on the screen.

**HTML parsing and DOM creation**

HTML parsing is a process by which a web browser converts HTML code into a structured in memory representation called Document Object model also known as DOM. This DOM serves as a programming interface, allowing scripts to dynamically access and manipulate the content, structure, and style of a document.

**CSS parsing and CSSOM creation**

CSS parsing is a browser’s process converting raw CSS code into structured usable format called, CSS Object Model (CSSOM). The CSSOM is a tree-like data structure that represents all the styles on a webpage, similar to how the Document Object Model (DOM) represents the page's structure.

**How DOM and CSSOM come together**

The Document Object Model (DOM) and the CSS Object Model (CSSOM) come together to form render tree, which is used by the browser to determine what to paint on the screen and where to position it.

**Layout (reflow), painting, and display**

Layout (reflow), painting, and display are critical, sequential steps in the browser’s rendering pipeline to draw web pages. Layout calculates the geometry (position/size) of elements, while Painting fills in pixels (colors, images). These processes, triggered by DOM/CSS changes, are optimized by minimizing expensive layout shifts for better performance.

**Very basic idea of parsing**

Parsing is the process of taking a flat, linear sequence of data—like a sentence, a line of code, or a log entry—and organizing it into a structured format based on a set of rules, known as a grammar.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769781888099/3ee679fb-7a34-4ef5-aaa6-9dcb92f5d1da.png align="center")