0

I have read a post, link here: Render-tree Construction, Layout, and Paint

A demo page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>No JS</title>
    <link rel="stylesheet" href="http://127.0.0.1:3000/static/css/style.css" />
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

The Performance Panel: enter image description here

Enlarge the red part:

enter image description here

As you see, there is no step of Render-tree Construction.

Why? Does the post wrong or the Render-tree Construction part is in Recalculate Style?

Lasy
  • 97
  • 9
  • The render tree is an abstract term, not a step in the timeline. Both `layout` and `recalculate styles` are parts of it. – wOxxOm Mar 19 '21 at 07:12
  • In that post, there are tow step: > Combine the DOM and CSSOM into a render tree. > Run layout on the render tree to compute geometry of each node. It's not likely that `layout` is part of `render tree` – Lasy Mar 19 '21 at 07:22
  • The render tree is not an activity, it's a structure, a tree of objects so there's no step in timeline that directly translates into it. The `Layout` and `recalculate styles` steps are performed on the render tree so these are the only *related* steps. – wOxxOm Mar 19 '21 at 07:31
  • Ah, my first comment has lost the word "construction". – wOxxOm Mar 19 '21 at 07:41
  • Sorry, I am still not understand. If render tree exits, there must be some steps that translate something to it. I want to know which steps do this and how can I inspect it in chrome devtools. @wOxxOm – Lasy Mar 19 '21 at 08:54
  • Both `layout` and `recalculate styles` are parts of the process that constructs the render-tree. The tree itself is not shown in devtools and never was. The article just explains what happens under the hood. – wOxxOm Mar 19 '21 at 09:05

0 Answers0