HOW THE BROWSER RENDERS PAGES AND STORES DATA

When we talk about application architecture, we usually refer to a wide range of factors that go into creating a website. Building out your component model, managing data and states, handling routes and transitions, and even rendering and loading your assets are all examples of this. For a better comprehension of this article, several terms will need to be explained.
First Contentful Paint (FCP): This is the time from the start of the page loading to the rendering of any part of the page's content on the screen. "Content" refers to text, images, etc, in this metric.
LCP (Largest Contentful Paint): Measures, when the pages main content has finished, loading
TTI(Time to Interactive): The time it takes for a webpage to become fully interactive. To be fully interactive refers to when the page displays useful content.
Rendering: This is a process in web development that turns website code into the interactive pages users see when they visit a website. Rendering engines are also called browser engines.
Parsing: Parsing means analyzing and converting a program into an internal format that a runtime environment can run.

Source from pingdom.com

Let's start from the basics: how we locate the web page.
As a user, once you input a request (e.g www.abc.com). Your computer queries the name server (DNS server which is the recursive name server it is set to use).
If you are new to the site, a DNS look-up is required. The diagram above gives a simple illustration of a DNS look-up but for better understanding. Check here. After this, the IP will likely be cached(we will look at the meaning later). This speeds up subsequent requests by retrieving the IP address from the cache instead of contacting a name server again.
Once we have established a connection to a web server, the browser sends an initial GET request on behalf of the user, which for websites is often an HTML file (It doesnt necessarily have to be an HTML file, it could be images, text, etc.). Once the server receives the request, it will reply with relevant response headers and the contents of the HTML.

Now, we have gotten our web page (HTML page) from the server but how do we display it for our users to be able to see it on their browser?

While loading a web page, a web browser sends a folder of files containing HTML, CSS and JavaScript code to a users web browser. The browser engine converts the data(bytes) into characters (the HTML code). It parses the characters into tokens which are further parsed into nodes. The browser engine links the nodes into a tree-like structure known as a Document-Object Model (DOM). The DOM is the JavaScript representation of the HTML. One of the reasons why JavaScript is referred to as the language of the web.
Simultaneously, the browser converts the CSS code to the CSS object Model (CSSOM) through a similar process, we shall be looking at that further.

An illustration of the process is shown below:

DOM (Document-Oriented Model):

The DOM is where all of the page's content is stored. Because each HTML element has its own set of properties, the Node object consists of various classes. The Node object for the div element, for example, is made up of HTMLDivElement, which inherits the Node class. HTMLDivElement, HTMLScriptElement, Node, and other built-in classes are available in the browser. After the browser has constructed Nodes from the HTML document, it must arrange these node objects into a tree-like structure. Because our HTML components are nested inside each other in the HTML file, the browser must reproduce this using Node objects it has previously built. It will aid the browser's rendering efficiency.
For example:
We have the Html file (article.html) as shown below:

We have the head and body tag - the head tag divided into the meta and title tag
The body tag divided into h1 and p

The DOM tree becomes:

Lets have another example:

The DOM tree becomes:

I hope we can recognize the pattern here and be able to draw up our DOM tree, we can also get that directly from the chrome console. This link contains a tutorial.

CSSOM (CSS Object Model):
The CSSOM has the webpages styles. When we create a site, we desire to make it attractive. And we do that by giving HTML elements, styles. CSS (Cascading Style Sheets) is responsible for styling the HTML elements on the HTML page. We can target DOM elements with CSS selectors and set a value for a style property like color or font-size. There are other ways to add styles to HTML components, including utilizing an external CSS file, embedded CSS, and so on. If an HTML element's color and font-size values are absent, for example, they inherit the value of the parent. As a result, you may envision having these characteristics on an HTML element and having them inherited by all of its children. This is known as cascading styles, which is why CSS stands for Cascading Style Sheets. This is why the browser creates a CSSOM, a tree-like structure that uses CSS cascading rules to compute styles. It operates o the same principle as the DOM tree. However, we it encounters a visibility block, all children der that node would not be rendered during the creation of the CSSOM.

RENDER TREE
The render tree is the combination of the DOM and the CSSOM. The browser has to calculate the layout of each visible element to paint them on the screen, for that the browser uses the render tree. Hence, unless the Render tree is constructed nothing is going to get printed on the screen which is why we need both the DOM and CSSOM trees. A render tree is a low-level representation of what will eventually get printed on the screen, Nodes that do not have pixels will not occupy space on the screen, hence wont be present on the render tree. However, elements with visibility will be printed on the render tree. E.g. any attribute with display: none wont get printed on the render tree. From the illustration below: span and its children wont get printed on the screen.

Source from developers.google.com

DOM + CSSOM = Render tree

For the first illustration, with no CSS property of display: none, we have our web page printed out.

Result

However, for the same code block but with the addition of the display: none, we have the following block of code.

Result

Browser engine rendering flow

Layout: It is sometimes mistaken as reflow, there is a little variation (which will be explained later), it takes into account the content and style received from the DOM and CSSOM and performs all necessary layout computing. It's the procedure for determining the width, height, and location of all nodes in the render tree, as well as the size and position of each object on the page. Layout refers to the initial time the size and position of nodes are calculated, whereas reflows refer to successive recalculations of node and placement.

Paint: Painting the individual nodes on the screen is the final step in the rendering process. The first incidence is referred to as FCP. Each box calculated during the layout step is converted to actual pixels on the screen by the browser.

Rendering and Loading
Recall: While loading a web page, a web browser sends a folder of files containing HTML, CSS and JavaScript code to a users web browser. The browser engine converts the data(bytes) into characters (the HTML code). It parses the characters into tokens which are further parsed into nodes.
As soon as the parser reaches the line with <link rel=stylesheet href=style.css>, request is made to fetch the CSS file, style.css. The DOM construction continues and as soon as the CSS file returns some content, the CSSOM construction begins.

Now, if we have a link to an external JS file or even an inline JS - script, what happens? Well, one of the things to remember is that once the browser encounters a script tag, the DOM construction is paused. The entire DOM construction process is halted until the script finishes executing. With the CSSOM, the JS execution waits, no CSSOM, no JS execution

N/B: By default, every script is a parser blocker! The DOM construction will always be halted.

Theres a way to change this default behavior though. If you add the async keyword or the defer to the script tag, the DOM construction will be continued, and the script will be executed when it is done downloading directly.

We've seen how the browser renders our webpages. however if we want a site that performs well, there are lots of things our browser takes into consideration. We shall be looking at that in a subsequent article.