Questions related to flat tree and layout tree

Yogesh Tembe

unread,

Apr 20, 2023, 1:44:47 PM4/20/23

to blink-dev

I am trying to understand various trees that are formed during rendering process of webpage.

So we have 4 types of trees - dom tree, css tree, flat tree and layout tree.

From documentation I know that flat tree is created from dom tree then with flat and css tree we form layout tree.

I have following doubts-

1) dom tree is formed after we finish parsing the html document but In which file do we convert dom tree to flat tree ?

2) CSS tree is basically a list of computed styles for each element from flat tree ? and is it for elements or selectors ?

3) In which file do we combine flat tree and css tree information to make layout tree ?

Please let me know I am misunderstanding any concept here. Thank you.

Jeremy Roman

unread,

Apr 20, 2023, 2:58:10 PM4/20/23

to Yogesh Tembe, blink-dev

Steve Kobes' Life of a Pixel talk is a good overview of this. While this is a couple years old, I think almost all of it remains accurate today.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4b30219f-bda6-4be9-953d-c5abe0bd8874n%40chromium.org.

Rune Lillesveen

unread,

Apr 21, 2023, 5:30:58 AM4/21/23

to Yogesh Tembe, blink-dev

On Thu, Apr 20, 2023 at 7:44 PM Yogesh Tembe <yogesh...@gmail.com> wrote:

I am trying to understand various trees that are formed during rendering process of webpage.

So we have 4 types of trees - dom tree, css tree, flat tree and layout tree.
From documentation I know that flat tree is created from dom tree then with flat and css tree we form layout tree.

I have following doubts-

1) dom tree is formed after we finish parsing the html document but In which file do we convert dom tree to flat tree ?

The flat tree does not have a separate representation, but we allow traversal of the flat tree via slot assignments stored on the html slot elements:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/html_slot_element.h;l=161-162;drc=8ce14ef97f8607b1b57f8d02da575ed5150eea9e;bpv=1;bpt=1

The assigned nodes are updated by SlotAssignmentEngine::RecalcSlotAssignments():

https://source.chromium.org/chromium/chromium/src/+/refs/heads/main:third_party/blink/renderer/core/dom/slot_assignment_engine.cc;l=43;drc=8ce14ef97f8607b1b57f8d02da575ed5150eea9e;bpv=1;bpt=1

2) CSS tree is basically a list of computed styles for each element from flat tree ? and is it for elements or selectors ?

Each rendered element in the flat tree has a stored ComputedStyle which represents the computed styles for that element. StyleEngine::RecalcStyle() is the entry point for updating these ComputedStyle objects. That method traverses the flat tree.

3) In which file do we combine flat tree and css tree information to make layout tree ?

StyleEngine::RebuildLayoutTree()

Please let me know I am misunderstanding any concept here. Thank you.

--

You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4b30219f-bda6-4be9-953d-c5abe0bd8874n%40chromium.org.