Constructing the Object Model

Before the browser can render the page it needs to construct the DOM and CSSOM trees.

  • HTML markup is transformed into a Document Object Model (DOM), CSS markup is transformed into a CSS Object Model (CSSOM).
  • DOM and CSSOM are independent data structures.
  • Chrome DevTools Timeline allows us to capture and inspect the construction and processing costs of DOM and CSSOM.

DOM Tree

Let’s start, with the simplest possible case: a plain HTML page with some text and a single image.

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1"
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

The final output is the Document Object Model of our simple page, which the browser uses for all further processing of the page.

DOM tree

This entire process of transforming bytes into a tree of objects can take some time, which can be tracked by the DevTools Timeline.

DOM Timeline

The Parse HTML process consists in four steps:

  1. Conversion: converts raw bytes into individual characters based on encoding (e.g. UTF-8).
  2. Tokenizing: converts strings of characters into tokens (e.g. "", "").
  3. Lexing: tokens are now objects (with their own specific properties and rules).
  4. DOM construction: created objects are linked in a tree data structure.

DOM Creation Process

CSSOM Tree

While the browser was constructing the DOM of our simple page, it encountered a link tag in the head section of the document referencing an external CSS stylesheet: style.css.

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span {display: none }
img { float: right }

Just as with HTML, we need to convert the received CSS rules into something that the browser can understand and work with. Hence, once again, we repeat a very similar process as we did with HTML.

Which gives us the CSSOM tree.

CSSOM Tree

DevTools captures parsing and CSSOM tree construction, plus the recursive calculation of computed styles under the followin event.

results matching ""

    No results matching ""