Introduction

HTML, CSS is foundation building block use to build visual experience on the web. Understand how browsers convert text into a visual form, is not only a very crutial aspect of web development, but also a required knowledge to build high performance visual.

In this article, we would try to explain the journey from raw text of HTML, CSS all the way to be visual as pixels on the screen, which is of course has multiple immediate steps involved.

To be more practical, we would examine the below demo, to understand the step it’s required to rendering the animation, and what is the different between methods.

1
<div class="container">
2
  <div class="content">content</div>
3
</div>
4
<div>
5
  <label>
6
    <input type="checkbox" id="with_transition" />
7
    <span>with smooth transition</span>
8
  </label>
9
</div>
10
<div>
11
  <button id="animate">animate</button>
12
  <button id="reset">reset</button>
13
</div>

1
/* moving */
2
.container.with_transition.animate .content {
3
  transform: translateX(50px);
4
}
5

6
.container:not(.with_transition).animate .content {
7
  left: 50px;
8
}
9

10
/* just for coloring */
11
.container.with_transition .content {
12
  background-color: lightcyan;
13
  color: black;
14
}
15

16
.container {
17
  padding: 10px;
18
  background-color: lightgrey;
19
  position: relative;
20
}
21

22
.content {
23
  display: inline-block;
24
  padding: 10px;
25
  background-color: grey;
26
  color: white;
27
  position: relative;
28
}

1
window.onload = () => {
2
    const $container = document.querySelector(".container");
3
    const $animate = document.querySelector("#animate");
4
    const $reset = document.querySelector("#reset");
5
    const $with_transition = document.querySelector("#with_transition");
6

7
    $animate.onclick = () => {
8
        if ($container.classList.contains("animate")) {
9
            $container.classList.remove("animate");
10
        } else {
11
            $container.classList.add("animate");
12
        }
13
    };
14

15
    $with_transition.oninput = () => {
16
        if ($with_transition.checked) {
17
            $container.classList.add("with_transition");
18
        } else {
19
            $container.classList.remove("with_transition");
20
        }
21
    };
22

23
    $reset.onclick = () => {
24
        $container.classList.remove("animate");
25
    };
26
};

Parsing

HTML Parsing

In the HTML parsing step, the browser takes the raw HTML content and constructs the Document Object Model (DOM) tree. The following visualization illustrates the structure of the DOM based on our example HTML:

This structure describes how the div.container holds everything else, including the div.content, a label element with a checkbox, a descriptive span, and the two buttons for animation control.

CSS Parsing

During the CSS parsing stage, the browser processes CSS styles to construct the CSS Object Model (CSSOM). We can visualize the display properties of the important elements as follows:

Each displayed property showcases how elements will be laid out on the page. The .container is a block-level element, while .content is an inline-block, providing specific behavior and layout characteristics.

Style and The Rendering Tree

Combining the DOM and CSSOM leads to the creation of the Rendering Tree (sometimes called the Layout Tree). This tree, is browser-internal data structure, represents what elements need to be rendered on the screen along with the corresponding computed styles.

Steps to Create the Rendering Tree

Step 1. Traverse the from the root of DOM, recursively to identify visual elements. There are some nodes that will be ignored as an result not being part of the visual render tree, including:

• Nodes that are not visible (for example, script tags, meta tags, and so on), and are omitted since they are not reflected in the rendered output.

• Nodes that are hidden using CSS and are also omitted from the render tree

Step 2. Create or update the corresponding Render Tree node that links back to the original DOM node.

Step 3. Calculate the Computed Styles for each DOM node and associate them with both the DOM node and the Render Tree node.

Computed Style

The computed style is the final style that gets applied to each element, taking into account styles from various sources.

1. Multiple Sources of Style: Styles can come from several places, including:
   • Inline Styles: Styles defined directly on the elements via the style attribute.
   • Internal Styles: Styles defined within <style> tags in the HTML document.
   • External Stylesheets: Styles applied via linked CSS files.
   • User Agent Styles: Default styles provided by the browser if no other styles are specified.

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <!-- external styles -->
5
    <link rel="stylesheet" href="styles.css" />
6

7
    <style>
8
      /* internal styles */
9
      .text {
10
        color: blue;
11
        font-size: 20px;
12
      }
13
    </style>
14
  </head>
15
  <body>
16
    <!-- inline styles -->
17
    <h1 class="text" style="color: red; font-weight: bold">Hello, World!</h1>
18

19
    <h1>Hello, World!</h1>
20
    <div class="text">Hello, World!</div>
21
  </body>
22
</html>

1
h1 {
2
  font-weight: bold;
3
}
4
.text {
5
  font-family: "Atkinson", sans-serif;
6
}

2. Order of Style Overriding: When multiple styles are applicable to an element, CSS follows a specific order to determine which style takes precedence:

   • Inline Styles have the highest specificity. They override styles from stylesheets.
   • Internal CSS comes next. It overrides any styles from external stylesheets.
   • External Stylesheets have lower specificity than inline and internal styles but can still affect styles depending on the order of the linked stylesheets.
   • User Agent Styles are the default styles applied by the browser and have the lowest precedence.

3. Cascade and Specificity: In cases where multiple rules could apply, the cascade determines the applicable style based on specificity and importance. Further details of this topic would be discuss in a separate topic, since it’s long and complex. Or you could learn more in the document of mozilla

Final Computed Styles

The computed style contains all the resolved values of CSS properties necessary for rendering, ensuring that each element appears as designed on the screen. By understanding the sources and overriding logic of styles, developers can create more predictable and maintainable CSS in their projects.

Layout

Before the paint step, the layout process takes place.

Layout is the step where the browser calculates the size and position of every visible element in the rendering tree. It determines where elements will appear on the screen based on their dimensions, styles, and the structure defined by the HTML and CSS.

Reflow is any subsequent size and position determination of any part of the page or the entire document.

The first time the size and position of each node is determined is called layout. Subsequent recalculations of layout are called reflows.

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Layout example</title>
7
    <style>
8
      body {
9
        margin: 0; /* Resetting margin for body */
10
        padding: 0; /* Resetting padding for body */
11
        background-color: lightyellow;
12
      }
13
      .outer {
14
        width: 70%;
15
        background-color: lightgrey;
16
        padding: 10px;
17
        position: relative; /* This sets the positioning context */
18
      }
19
      .outer::before {
20
        content: "outer";
21
      }
22
      .inner {
23
        width: 50%;
24
        padding: 10px;
25
        background-color: lightblue;
26
        position: fixed; /* This positions to outer element */
27
        top: 20px; /* 20 pixels from the top of the outer div */
28
        left: 25%; /* Positioned to the center of the outer div */
29
      }
30
      .inner::before {
31
        content: "inner";
32
      }
33
    </style>
34
  </head>
35
  <body>
36
    <div class="outer">
37
      <div class="inner"></div>
38
    </div>
39
  </body>
40
</html>

• Outer Element (.outer):
  • The .outer div is assigned a width of 70% of its containing block (the body), and it has a background color of light grey.
  • The positioning is set to relative, which means that it will be placed according to where it naturally fits in the document flow.
• Inner Element (.inner):
  • The .inner div has a width of 50% of its parent (.outer), and its background color is light blue.
  • It is positioned using absolute, which means it will be positioned relative to the nearest positioned ancestor (in this case, the .outer div).
  • The top: 20px; property means it will be positioned 20 pixels from the top of the .outer div.
  • The left: 25%; property positions it 25% from the left side of the .outer div, centering it within this outer div.

After determining the positions of both elements, the browser prepares to paint the pixels on the screen. The .outer div will be displayed first, followed by the .inner div at the calculated position.

The positions and dimensions calculated during the layout phase allow the browser to know precisely where and how to paint each element. As the computed positions are finalized, these nodes in the rendering tree prepare for the next critical stage: painting.

Paint

With the layout information in hand, the browser takes the information generated from the rendering tree, including the positions, dimensions, and order of appearance of each node to converts each node to actual pixels on the screen.

Layers

To ensure repainting can be done even faster than the initial paint, the drawing to the screen is generally broken down into several layers. This way can be visually updated independently by a separate thread There are specific properties and elements that instantiate a layer, including:

• <video>
• <canvas>
• any element which has the CSS properties:
  • opacity
  • 3D transform
  • will-change
  • filter
  • position: fixed or sticky with z-index stacking
  • scrolling elements: overflow: scroll or auto
  • a few others that create new stacking or compositing contexts Each of these nodes — along with their descendants — will be painted onto their own layer, unless a descendant independently qualifies for its own layer.

Rasterize

Once the layers are determined and the paint commands are ready, the browser rasterizes each layer.

Rasterization is the process of converting vector-like paint instructions (such as “draw a rectangle here” or “render this text at 14px”) into actual bitmaps or GPU textures — the raw pixel data the GPU can work with.

This step often happens on a separate raster thread, off the main thread to keep the UI responsive. Modern browsers use GPU-accelerated rasterization, meaning the drawing commands are executed directly into GPU memory.

The result of rasterization is one or more tiles (smaller bitmap chunks), which make partial updates and scrolling more efficient.

Composite

When multiple layers overlap or interact, the browser must composite them to produce the final image on the screen.

Compositing is handled by the compositor thread, which uses the GPU to:

• blend the layers in the correct z-order,
• apply transforms (translate, scale, rotate),
• adjust opacity, filters, and masks, and merge everything into the final frame buffer.

Because each layer is already rasterized into GPU memory, the compositor can redraw or animate them independently — without re-running layout or paint. That’s what allows smooth 60 FPS animations for properties like transform and opacity.

As the page continues to load assets or DOM changes occur, reflows can trigger repaints and occasionally re-rasterization, followed by re-compositing — the final merge step that brings everything to the screen in real time.

Conclusions

By understanding the entire rendering pipeline, developers can optimize performance and improve the user experience on the web.