If you haven't! Don't worry!
In this article we'll be exploring the internal workings of a browser, What it is, How it works and many more!
So without delaying further, Let's START!
Many of us think that Browser is just another piece of software! But let me tell you that's not the actual case! The Browser has evolved into something much more powerful. We can even compare it to an Operating System as well.
Because if you are a web developer you should know the internal working of the software your job depends on. Also, Browsers are not like other software, they are special. What makes them really special is their popularity. They are the most widely used software right now in the world.
To truly understand a browser's inner workings, let's break it down into its essential components:
Data Portion: The First and major portion of our browser is taken by the Data portion that manages different types of data.
User Interface: This is the place where the user can interact with the browser.
Rendering Engine: This engine plays an important role in rendering the web page / perform painting.
Networking: Browsers have robust networking capabilities, allowing them to communicate with servers, retrieve HTML, CSS, and other resources, and display them to users.
We, Developers very often make memes and jokes about HTML. But We should appreciate HTML. Let me explain this to you!
HTML is not a programming language! right?
So How did it have so much power that it can come into our browser (which is itself an operating system) and render the pixels for us!! Isn't it Fascinating?
Now, We'll understand load the HTML and Display text on our Screen. You might think it's pretty simple, but it's not that simple! There's a lot going on behind the scenes!
To understand that simply write:
Guess what output we'll get!
All the H2 tags? or An array of H2 tags?
NO! We'll get a NodeList!
But we never write HTML in the form of
NodeList How did this happen?
Here Comes the Rendering Engine! Rendering Engine Converts the HTML code to NodeList.And most of the engines are written in C++ so Though we are writing our code in HTML, it's being parsed in the form of C++.
Now, Let's see how HTML works!
Loading the File: The first step for any browser to work is to load the file. The job of a browser is to display the data and give the ability to interact with that data. When the Browser loads any file, It gets that as a raw byte code.
Character Encoding: After getting the Raw Bytes, the browser converts the byte code into Characters based on the specific character encoding (example: UTF-8). This process is called Character Encoding.
Tokenization: Next, like other programming languages, HTML creates tokens out of the Characters. It helps the web browser to understand and process the content effectively.
Object Creation: After the Tokenization it's required to put a structure around it. Here it creates Huge objects out of the tokens and stores a lot of information about these tokens.
Relation Establishment: So every token has its objects and they are scattered and very hard to manage. That's where the importance of building relationships was felt. Then Relationships between elements, such as parent-child or sibling connections, are established.
NodeList Creation: Now we know the relationship between the Objects, the next step is creating a Node/NodeList according to the relationship.
DOM Generation: Now, a DOM tree is generated, representing the structured hierarchy of web page elements.
Remember! Having a DOM doesn't mean we have something to show on the screen! It's just that we have a DOM created in the memory.
When a browser receives an HTML file, it doesn't stop there. It also requests and receives external CSS files linked to the page.
After getting the Raw data it works just like HTML and creates Objects. These objects also need some relations, So relations are set up and that establishes a model.
So just like DOM(Document Object Model) CSS creates its own Object Model, that is CssOM(CSS Object Model).
Now, We have the DOM and CSSOM, Can we paint the picture on the Web?
NO! But Why?
Let's understand what happens behind the scenes!
When the Browser loads an HTML file it starts working on it's DOM. But the moment it sees a link for CSS it starts working with CssOM parallelly. But as of now we don't have any relations between DOM and CssOM.
Here Comes a New Tree 🌳 that is "Render Tree". The Render Tree is the result of combining the DOM and CSSOM. The Render Tree creates a structure to represent the visual elements on the web page.
After the creation of the render Tree, the Browser starts calculating the size of that screen and according to that, it determines the layout and positioning of each element.
And after all these Hard works, the Browser starts painting (that means rendering the web page on our screen)
So, The Priority order looks like this :
To sponsor my work, please visit: Arindam's Sponsor Page and explore the various sponsorship options.
Thank you for Reading :)