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

Browser ## Main parts of a browser ## User Interface (UI) ## Browser Engine vs Rendering Engine ## Networking ## How DNS Works: A Browser’s Journey from Domain to IP ## Kunal ・ Jan 28 ## HTML parsing and DOM creation ## CSS parsing and CSSOM creation ## How DOM and CSSOM come together ## Layout (Reflow), Painting, and Display ## Kunal Follow Have you ever notice what happens when you type www.twitter.com and hits enter. Twitter opens right ? But what really happens inside the browser . In this blog we will discuss : The browser is an application software that allows the user to access information from the internet by serving a interface between the user and the server . When you search something on these browser A lot happens in milliseconds behind the scene . The browser goes into a journey to fetch , understand , arrange and finally display the page . There are some main parts that browser internally worked on to fetch a website for you . Think of a browser as a team of workers : 1. User Interface (UI) : Address bar, back button, tabs, bookmarks. the "First bencher" . 2. Browser Engine : The coordinator , tells other part what to do. 3. Rendering Engine : The artist , Turing raw HTML/CSS into visuals. 4. JavaScript Engine : The specialist , It runs the JavaScript code. 5. Networking : The delivery team, fetching files from servers. 6. Data Storage : The storeroom , It stores cache , cookies , local storage of browser 7. Graphics / UI Backend : the teacher , Draws text , images , layout on the screen Now understand some important part of browser one by one. It is the part where you interact with the browser , you can do : Adding tabs , bookmarks Interacting with back buttons , address bars This UI does not display the website it self its just for interaction. Browser Engine : It connect UI with the rendering engine and control page Rendering Engine : It does the actual work it converts HTML , CSS into the visual webpage what you actually see on the browser. Networking is all about fetching your HTML , CSS and JavaScript When you press enter : If you want to know what DNS is , read 👇 Now we have HTML , CSS and JS lets look how browser break it down. Do you know your HTML does break into several parts before displaying it to you. Browser parse your HTML into DOM ( Document Object model ) DOM is basically a tree that helps the browser to understand the structure of HTML elements Parsing = breaking something into meaningful pieces. Just like HTML , CSS also parsed before displaying it to you. But CSS parsed separately into its parser called CSSOM short for CSS Object Model (CSSOM). CSSOM defines how element should look : colors , fonts , size etc. 1. DOM : Understand the structure by breaking HTML elements 2. CSSOM : Defines how element should look Browser combines DOM and CSSOM to build Render tree basically a blue print which is used to draw the webpage on the screen . After the browser builds the Render Tree, it moves to the next step — Layout, Painting, and Display, where the browser calculates positions, fills colors/text, and finally shows the page on screen. Layout (Reflow): Browser calculates size and position of each element on the page. Painting: Browser fills pixels — colors, text, images, shadows, borders. Display (Compositing): Browser puts painted layers together and shows final result on screen. Focus on flow, not memorization. The journey matters more than the names. Thanks for reading ! if enjoyed this blog , you can read more on this 👇 Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: Example of some common browser Google , Safari , Firefox , Opera , Brave , Microsoft Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: Example of some common browser Google , Safari , Firefox , Opera , Brave , Microsoft CODE_BLOCK: Example of some common browser Google , Safari , Firefox , Opera , Brave , Microsoft CODE_BLOCK: Browser flow UI → Browser Engine → Rendering + JS Engine → Network → Storage → Screen. Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: Browser flow UI → Browser Engine → Rendering + JS Engine → Network → Storage → Screen. CODE_BLOCK: Browser flow UI → Browser Engine → Rendering + JS Engine → Network → Storage → Screen. CODE_BLOCK: <html> <body> <h1>Hello</h1> <p>Welcome</p> </body> </html> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <html> <body> <h1>Hello</h1> <p>Welcome</p> </body> </html> CODE_BLOCK: <html> <body> <h1>Hello</h1> <p>Welcome</p> </body> </html> CODE_BLOCK: HTML └── BODY ├── H1 │ └── "Hello" └── P └── "Welcome" Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: HTML └── BODY ├── H1 │ └── "Hello" └── P └── "Welcome" CODE_BLOCK: HTML └── BODY ├── H1 │ └── "Hello" └── P └── "Welcome" CODE_BLOCK: URL typed ↓ DNS lookup + HTTP request ↓ HTML → DOM CSS → CSSOM ↓ DOM + CSSOM → Render Tree ↓ Layout (Reflow) ↓ Paint ↓ Pixels on screen Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: URL typed ↓ DNS lookup + HTTP request ↓ HTML → DOM CSS → CSSOM ↓ DOM + CSSOM → Render Tree ↓ Layout (Reflow) ↓ Paint ↓ Pixels on screen CODE_BLOCK: URL typed ↓ DNS lookup + HTTP request ↓ HTML → DOM CSS → CSSOM ↓ DOM + CSSOM → Render Tree ↓ Layout (Reflow) ↓ Paint ↓ Pixels on screen - What a browser actually is ? - Main parts of a browser (high-level overview) - User Interface: address bar, tabs, buttons - Browser Engine vs Rendering Engine (simple distinction) - Networking: how a browser fetches HTML, CSS, JS - HTML parsing and DOM creation - CSS parsing and CSSOM creation - How DOM and CSSOM come together - Layout (reflow), painting, and display - Very basic idea of parsing (using a simple math example) - Adding tabs , bookmarks - Interacting with back buttons , address bars - First browser checks if the website is in cache if not - It will go to DNS resolver that return the IP of the website then - Browser send an HTTP request to the website server - Server respond with HTML , CSS and JS