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 <[email protected]> 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. > > > On Wednesday, May 3, 2023 at 7:55:04 PM UTC+5:30 Christian Biesinger wrote: > >> 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 >> >> On Tue, May 2, 2023 at 8:02 PM jungle panda <[email protected]> wrote: >> > >> > 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 ? >> > >> > -- >> > 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 [email protected]. >> > 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. >> >> > -- 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 [email protected]. To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPTJ0XGsmkYDfP_9seuTFf61X%2B2MEXPxnK9UG0uG-dA9xWQaxw%40mail.gmail.com.
