Beginner-Friendly Guide to Browser Internals
When you first used a browser you must have thought what sorcery is going on. You don’t know what is happening in the background but as you click a button magically things happen as if that button knows what to do when I am being clicked. So the question is does it know. The answer is YES but there is a twist the button doesn’t know, someone who created that button programmed the logic in that button and told him that you do this when you are clicked.
An easy example is dark mode which we all love. For a non technical person a dark mode is something that is present in any website and they expect that to be there on every website but what they dont know it has to be coded in the website.
This is where even though things look like automatic and intuitive at first but there are things that are happening in the background to make it work. Similarly the browser works. Even though we accustomed to think that when we search for a site it automatically gets the result but there are so many things that are happening in the background that are totally astonishing.
Browser only understands HTML(Skeleton), CSS(Skin), and JavaScript(Brain). While the user understands the visual things like buttons, textboxes, etc. So browser under the hood does many things to convert the messy and ugly code to a beautiful UI that we all love to see when we visit a site.
So what are the things that make browser a special tool
The User Interface - It is the interface that you interact with. All the buttons and text boxes are present here.
The Browser Engine - It acts as a bridge between the rendering engine and the UI. It handles high-level actions like clicking the back button or typing a URL, and coordinates the rendering process to update what you see on the screen.
The Rendering Engine - This is the most important part of the browser. It transforms the ugly code to a beautiful UI.
Networking - It acts as a messenger sending your files and recieving your files. It also manages all the requests related to the internet.
The Journey Begins: ‘NETWORKING’
This is the first step you make a request when you type google.com in the url bar and press ENTER.
The Networking finds the address of google.com and make a request to it. The server responds with a code containing HTML, CSS and JS.
Now, the rendering engine takes over.
Parsing: Reading the Instructions
Before painting the canvas the browser has to understand what it has recieved. This process is called parsing.
How it is done
Tokenization - The expression is broken in different parts (Num: 2, Operator: +, Num: 3)
Building a Tree - A tree is build with the help of some algorithm to understand the relationship of the tokens.
Result - 5
This is what browser does to html tags to understand code.
The Critical Rendering Path
Now that we have understood the code. Next comes the rendering path
Step 1: HTML → DOM TREE
The browser creates a Document Object Model of the HTML. It is a tree-like structure that depicts a parent-child relationship.
Step 2: CSS → CSSOM TREE
Just like the DOM tree of HTML, the CSS Object Model is also created to so that the hierarchy of the CSS properties can be understood.
Step 3: Combining Them
The browser now combines both the trees to form the Render Tree. It doesn’t hold the things that are not visible on the UI.
Step 4: Layout(Reflow)
This is the part where the control from developer is handed over to the browser. The developer has no control of this part and the parts moving further. Now the render tree is there still it doesn’t know where to put those things on the canvas. So the measurement of each object happens. Remember resizing the browser also makes the browser to calculate again.
Step 5: Paint
Finally, the browser fills in the pixels. It does everything writing the text, coloring the canvas and rendering the images.
Step 6: Composition
The layering part is taken care of. And finally the painting is done and UI is rendered.
Summary
Remember, a browser is one of the magical things for a person who doesn’t know about the backend part of the browser. But if you want to become a good developer, you have to start by knowing how the browser works.
