How DOM and CSSOM are combined during Web Page Rendering

Combining the Document Object Model (DOM) and the CSS Object Model (CSSOM) to create a Render Tree is a crucial step in the browser rendering process. Below is a simplified example illustrating how the DOM and CSSOM are combined:

Let’s consider a simple HTML document:

<!DOCTYPE html>
<html>
  <head>
      <title>Example Page</title>
      <style>
          h1 {
              color: blue;
          }
          p {
              font-size: 16px;
          }
      </style>
  </head>
  <body>
      <h1>Hello, World!</h1>
      <p>This is a sample paragraph.</p>
  </body>
</html>

DOM Construction:

The browser parses the HTML and constructs the DOM tree representing the document’s structure:

- Document
  - html
    - head
      - title
        - TextNode: "Example Page"
      - style
        - CSS rules for h1 and p
    - body
      - h1
        - TextNode: "Hello, World!"
      - p
        - TextNode: "This is a sample paragraph."

CSSOM Construction:

The browser parses and processes the <style> element within the <head>. It creates a CSSOM tree representing the style rules:

- CSSOM
  - Rules
    - Rule: h1
      - Property: color: blue
    - Rule: p
      - Property: font-size: 16px

Combining DOM and CSSOM:

The browser combines the DOM and CSSOM to create a Render Tree. The Render Tree includes only the elements that will be visually rendered on the web page, considering the CSS styles:

- Render Tree
  - RenderObject (for the <body> element)
    - RenderObject (for the <h1> element)
      - TextNode: "Hello, World!" (styled with color: blue)
    - RenderObject (for the <p> element)
      - TextNode: "This is a sample paragraph." (styled with font-size: 16px)

In this example, the Render Tree represents the visual rendering of the web page. It includes only the elements that will be displayed on the page, their visual styles, and the textual content. This tree is used for the final rendering phase, which involves layout, painting, and displaying the page to the user.