Questions related to flat tree and layout tree

38 views
Skip to first unread message

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 ? 

 
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.


--
Rune Lillesveen

Reply all
Reply to author
Forward
0 new messages