How does the browser render a website?

A web browser is a software program that allows a user to locate, access, and display web pages. Browsers are used primarily for displaying and accessing websites on the internet, as well as other content created using languages such as Hypertext Markup Language (HTML) and Extensible Markup Language (XML).

The browser engine is a core software component of every major browser, and different browser manufacturers call their engines by different names. The browser engine for Firefox is called Gecko, and Chrome’s is called Blink, which happens to be a fork of WebKit.

Browser Rendering process

When a browser sends a request to the server to fetch an HTML document, the server returns an HTML page in binary stream format which is basically a text file with a response header Content-Type which has value text/html; charset=UTF-8. Here text/html is a MIME Type which tells the browser that it is an HTML document and charset=UTF-8 tells the browser that it is encoded in UTF-8 character encoding.

High-Level Flow :

High-Level Flow

When a web page is loaded, the browser first reads the TEXT HTML and constructs DOM Tree from it. Then it processes the CSS whether that is inline, embedded or external CSS and constructs the CSSOM Tree from it. After these trees are constructed, then it constructs the Render-Tree from it. Once the Render-Tree is constructed, then the browser starts the printing individual elements on the screen.

DOM (Document Object Model)

When the browser reads HTML code, whenever it encounters an HTML element like html, body, div etc., it creates a JavaScript object called a Node. Eventually, all HTML elements will be converted to JavaScript objects. Since every different HTML element has different properties, the Node object will be created from different classes (constructor functions).

CSSOM (CSS Object Model)

When we design a website, our intentions are to make it as good looking as possible. And we do that by providing some styles to HTML elements. In the HTML page, we provide styles to HTML elements using CSS which stands for cascading style sheet. Using CSS selectors, we can target DOM elements and set a value to style property such as color or font-size.

Render/ Frame Tree

• DOM + CSSOM
• Combines the two object models, style resolution
• This is the actual representation of what will show on screen
• Not all-to-1 mapping of HTML.

Layout

• Recursive Process
• Traverse render trees
• Nodes position and size
• Layout’s children first

Paint

• Will take the layered out render tress, creates layers in an incremental process
• Build up over 12 phases

Important Points to remember:

• The entire DOM construction process is halted until the script finishes executing.
• The location of the script matters. If you extract the inline script to an external local file app.js, the behavior is just the same.
• The javascript execution will be halted until the CSSOM is ready.