How a Browser Turns a Website into a Screen You Can See
When you type a website address (like google.com) into your browser and press Enter, the browser does a lot of work behind the scenes to show you the page. Here’s what happens, step by step:
1. Getting the files (Network)
First, the browser finds the server where the website lives and asks for its main file (the HTML document). Once the server sends the file, the browser receives it as a stream of raw data.
2. Reading the HTML (Parsing)
The browser reads this raw data and turns it into a family tree of elements, called the DOM. This tree shows all the content on the page (headings, paragraphs, images, etc.).
While reading, the browser often finds links to other files, like CSS files (which control style and color) and JavaScript files (which control behavior). It starts downloading these extra files at the same time, without waiting to finish reading the HTML.
3. Reading the Styles (CSSOM)
The browser takes any downloaded CSS files and turns them into another tree, called the CSSOM. This tree knows how every element should look- its colors, sizes, and fonts.
4. Combining Content and Styles (Render Tree)
Now, the browser merges the content tree (DOM) and the style tree (CSSOM) into a new list called the Render Tree. This list only includes the elements that will actually be visible on screen. For example, if an element has display: none, it’s left out entirely.
5. Calculating Positions (Layout)
Next, the browser figures out exactly where every visible element should sit on your screen and how big it should be. This step is called layout. It's like measuring where to put every piece of furniture in a room.
6. Drawing the Pixels (Paint)
The browser now knows what to show and where to show it. So, it starts drawing the pixels. It breaks the page into separate layers (for things like menus that stay in place or animations) to make things run smoother.
7. Putting It All on Screen (Compositing)
The browser sends these drawn layers to your computer’s graphics card (GPU), which puts them all together like a collage and finally displays the page on your screen. This makes scrolling and animations look smooth.
8. Running JavaScript (The Event Loop)
JavaScript, the language that makes web pages interactive, runs on a single line - one task at a time. The browser handles these tasks using something called an event loop. It keeps a queue of tasks (like clicking a button or loading a file) and processes them one by one.
However, there's a catch: when the browser finds a regular JavaScript file in the HTML, it stops reading the HTML until that file is downloaded and run. Why? Because the script might change the page’s content, and the browser needs to be ready for that. (Modern browsers can use special tags like async or defer to avoid this delay.)
9. Speed Matters (The Goal)
All of these steps—from reading HTML to showing the page—need to happen very fast, ideally in less than 1/60th of a second. This is what makes animations look smooth and the page feel responsive.
10. Constant Updates
The browser doesn't just do this once. Every time you click, scroll, type, or an animation runs, the browser repeats some of these steps—but only on the parts of the page that changed, not the whole thing. It uses different background threads (like a main thread, a compositor thread, and network threads) to keep everything running quickly and smoothly without freezing your screen.
