How browser works/ Internals of browser working/ Behind the browser:-

Note: In this, we only talk about Render Engine. Now as a developer, I am always curious about that when I write any tag and try to get that tag using getElementbyId(or any other way), it always gives me NodeList. I was like what?? I haven’t passed any nodelist then how it returns things in that way. So let’s go to find it

Steps to convert our data into DOM:-

Upload a file or run a file on browse which have text, button, tabs tags/elements.
Initially the browser takes the above data as Raw bytes.
Conversion in sequence of characters (like we want to convert our data in english,english, japanese , in our current scenario , we convert them in UTF.
Tokenization of characters . Which is the crucial part of any language. It picks all the words or we can say it, it picks all the keywords from our page. Like h1,p,if,else, button, html body.
Now every tag is converted into an Object . like for h1 tag {tag:h1,title:’this is heading tag,value/data:’’ “. This process takes place for each and every element on the page.
Now the objects are going to be converted into models, which means we have to arrange the structure of the things.
Now relationships are going to be established in every element (like child and parent tree structure in nodes).
DOM is created by HTML Parser.
That's why we called it DOM(Document(Every html file is a document) Object Model). And when we retrieve them , it gives us a NodeList.

The same process is going for css as well but the only difference is that tokenization happens with CSS Parser and it makes css object model (cssOM) instead of DOM

In-short :-'

Once both trees are ready, they enter the Critical Rendering Path:

Render Tree:

The browser combines the DOM and CSSOM. This tree only includes visible elements (e.g., elements with display: none are excluded).

Layout (Reflow):

The browser calculates the exact geometry (size and position) of each node.

Paint(Render):

The visual elements are converted into actual pixels on the screen.

Display:

Displays the whole html on your web page.

Hope now you are able to understand the behind engineering or behind the working of browser to render our one html.

\=============================END==================================

Command Palette