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/CAPTJ0XE3G4J7t4X8u_yM0Nowhy%2BD3MZtXfkZP%3DJTuVMcaJB%3DXg%40mail.gmail.com.
