How modern browser render a HTML page?
Modern web browsers are incredibly complex, but they follow a well-defined pipeline to convert HTML, CSS, and JavaScript into the pixels you see on your screen.
Here is the step-by-step breakdown of the rendering process.
1. The Critical Rendering Path (Construction)
When a browser receives the initial HTML bytes, it begins the Construction Phase to understand the page structure and style.
DOM (Document Object Model): The HTML parser converts HTML tags into a tree structure of nodes.
CSSOM (CSS Object Model): The CSS parser processes stylesheets. It maps CSS rules to the DOM nodes.
Render Tree: The browser combines the DOM and CSSOM to create the Render Tree. This tree contains only the nodes that are actually visible (e.g., elements with
display: noneare excluded).
2. Layout and Painting
Once the Render Tree is ready, the browser needs to figure out exactly where everything goes.
Layout (Reflow): The browser calculates the exact geometry of every element (position, width, height) relative to the viewport.
Paint: This is the process of filling in pixels. The browser converts the layout information into "paint records" (e.g., "draw a blue rectangle at x,y").
Layering (
z-index): To handle overlapping elements efficiently, the browser creates Compositing Layers. Elements that require their own layer (like those withz-index,transform,opacity, or fixed-position elements) are painted onto separate surfaces rather than a single flat canvas.
The Compositing Process
This is where the browser gains performance by separating responsibilities.
Compositor Thread: Instead of the main thread doing all the work, the browser hands the rendering data to the Compositor Thread. Its job is to figure out how these different layers fit together.
Tiling: The Compositor divides the page into small, manageable tiles.
Rasterization: These tiles are sent to the Graphics Card (GPU). The GPU rasterizes the tiles (turns the "paint records" into actual bitmap images) and places them into the final visual buffer.
Display: Finally, the Compositor sends the "draw command" to the browser's UI, and the GPU displays the final frame on your screen.
Hardware Resources: RAM and GPU
The browser intelligently balances hardware resources to keep the UI responsive:
Resource | Role in Rendering |
RAM | Used for storing the DOM/CSSOM trees, scripts, raw images, and the memory footprint of individual layer tiles. High memory usage usually occurs when a page has a massive DOM or many high-resolution assets. |
Graphics Card (GPU) | Acts as a high-speed parallel processor. It is responsible for the actual Rasterization (painting pixels) and, most importantly, Compositing. Moving elements (CSS animations/transforms) are handled by the GPU, which is why animating |