Understand DOM updates

[jungle panda]

I have basic understanding of dom tree, flat tree, css tree and layout tree.

1) I wanted to know when we add a child node in some parent node i.e when we update the dom then which tree is affected ? and is there any tree that can give us detla change that is done by dom update ?

I guess blink updates the flat tree first with addChild method from "Node" class and then updates the layout tree directly, is this right ?

Is there any place in blink code where we can get delta change made in flat tree ?

2) Also If I change color of certain div in dom then Where does css gets updated ? how to know which property for which element is dirty and catch that delta change ?

[Christian Biesinger]

The layout/fragment tree is updated asynchronously upon a change, so
there's two steps -- first, a layout object is marked as needing
layout, e.g. through SetChildNeedsLayout or one of the other methods
(https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/layout_object.h;l=1508;bpv=1;bpt=1?q=NeedsLayout&sq=&ss=chromium
is the full set of bits)

Then later layout is triggered through LayoutFrameView::PerformLayout
(https://source.chromium.org/chromium/chromium/src/+/refs/heads/main:third_party/blink/renderer/core/frame/local_frame_view.cc;l=693;drc=4b31c91e6393ffb654743c661c815151b6f29982;bpv=1;bpt=1)

When you append a child, we first need to calculate style for the
element. Style is marked dirty here:
https://source.chromium.org/chromium/chromium/src/+/refs/heads/main:third_party/blink/renderer/core/dom/container_node.cc;drc=4b31c91e6393ffb654743c661c815151b6f29982;bpv=1;bpt=1;l=1058

This eventually leads to RecalcOwnStyle
(https://source.chromium.org/chromium/chromium/src/+/refs/heads/main:third_party/blink/renderer/core/layout/layout_object.cc;l=2486;drc=4b31c91e6393ffb654743c661c815151b6f29982;bpv=1;bpt=1)
and LayoutObject::SetStyle
(https://source.chromium.org/chromium/chromium/src/+/refs/heads/main:third_party/blink/renderer/core/layout/layout_object.cc;l=2486;drc=4b31c91e6393ffb654743c661c815151b6f29982;bpv=1;bpt=1)

Style invalidation isn't really done on a per-property basis, although
LayoutObject::SetStyle does analyze which properties were changed.

If you want to observe deltas in the DOM tree, consider using
MutationObserver:
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Hope that helps!
Christian

> --
> 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/5d048a72-1002-4b5a-b151-e55664c9b08en%40chromium.org.

[Christian Biesinger]

I guess it depends on what kind of DOM change you are referring to but generally they update the flat tree first and then the layout tree afterwards.

But certain changes update the style directly and don't affect the flat tree in a strict sense.

Christian

On Wed, May 10, 2023 at 7:19 AM jungle panda <jungle...@gmail.com> wrote:

So when dom update happens the changes are not made in flat tree  and directly happen on layout tree ?

Actually "mutationObserver" is not able to catch all the changes in dom.

[jungle panda]

So when dom update happens the changes are not made in flat tree  and directly happen on layout tree ?

Actually "mutationObserver" is not able to catch all the changes in dom.

On Wednesday, May 3, 2023 at 7:55:04 PM UTC+5:30 Christian Biesinger wrote:

[jungle panda]

We have a function "ContainerNode::RebuildLayoutTreeForChild" that gets called for each node which needs change in layout. But the layout object attached to the node at this point is still older one.

I have checked " LocalFrameView::PerformLayout" but I am not able to find a place where I can get updated layout object for each node. 
There is a place in "LocalFrameView::UpdateLayout" where we set the document LifeCycle as "kLayoutClean" that marks the end of layout phase.

So can you please let me know if there is any function in code where we can get updated layout object for each node which were marked dirty for layout.