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/92b09524-d497-4b43-8562-344b17469d94n%40chromium.org.
