How does a Web browser render a page?

A web browser renders a page by following a series of steps that transform the HTML, CSS, and JavaScript code into the visual content you see on your screen. This rendering process is complex and dynamic, determining how web pages are displayed in the browser.

The browser's rendering engine is responsible for interpreting the code and drawing the elements. The core steps involved are:

The Rendering Pipeline

According to the reference, the rendering process involves four main steps:

1. Parsing and Tokenization

• The browser begins by processing the raw bytes of the HTML file.
• It converts these bytes into characters based on the specified encoding (like UTF-8).
• These characters are then parsed into tokens, which are small, meaningful units.
• Finally, these tokens are converted into nodes representing HTML elements (like <p>, <div>, <img>).

2. Constructing the DOM Tree

• The nodes created during parsing are linked together in a tree structure called the Document Object Model (DOM) tree.
• This tree represents the logical structure of the HTML page, showing the relationships between elements (e.g., a div containing a p).
• Similarly, the browser parses the CSS files and inline styles to create the CSS Object Model (CSSOM) tree, which represents the styles applied to the elements.

3. Constructing the Rendering Tree

• The browser combines the DOM tree and the CSSOM tree to create the render tree (also known as the layout tree).
• This tree contains only the visible elements on the page. For example, elements with display: none; are excluded.
• Each node in the render tree includes information about the element's content and its computed style.
• This tree is used to calculate the layout of each visible element – its size, position, and other geometric properties on the page. This layout process is sometimes called "Reflow" or "Layout."

4. Painting and Compositing

• Once the render tree is constructed and the layout of all visible elements is known, the browser proceeds to the painting phase.
• In this phase, the browser draws each element's pixels onto the screen in layers. This includes backgrounds, colors, borders, text, and images.
• Finally, in the compositing phase, these painted layers are combined in the correct order, taking into account things like element stacking order (controlled by z-index) and transparency, to produce the final visible page on the screen.

Here's a simplified view of the main steps:

This dynamic process allows the browser to efficiently handle updates and changes, such as user interactions or changes to the page content, by potentially re-running parts of this pipeline (like recalculating layout or repainting elements) only when necessary.