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

You Type URL, press Enter ,and a website appears. But what's really happening?

Main Parts:

• User Interface : Address bar, tabs, button
• Rendering Engine : Displays webpage
• Networking : Fetches files from internet
• Javascript Engine: Runs javascript code

The journey : URL to screen

• Fetches the Files The networking components download HTML,CSS and javascript files from web server
• Parse HTML - Create the DOM The browser reads the HTML and builds the DOM tree structure of your page's structure
• Parse CSS - Create the CSSOM tree styling structure
• Render Tree The browser merges the DOM(content) and CSSOM(Styles) into a tree
• Layout The browser calculates exactly where each element goes and how big it should be.
• Paint The browser draws the actual pixels :colors, text, images, borders and shadow
• Display everything is rendered on screen

The whole process happens in milliseconds, every time you load page or interact with it.