html - Tree structures in WebKit (Chrome) -
web browsers make many trees when navigating web pages including dom, cssom, render, layout trees. (does layout tree exists? or layout tree concept amounts being concept of rendering tree layout property?)
i'm inspecting chromium source code, , i’m trying find data structure of each tree, , how/when/where made.
i found dom tree in webkit, tree-like structure. following source code, , see references like:
- dom tree: https://www.slideshare.net/abapier/dom-48837015
- high-level view: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
what found following:
htmldocumentparserworks through functionhtmldocumentparser::pumptokenizer()- in function, calls
htmldocumentparser::constructtreefromhtmltoken(), constructs dom tree usinghtmltreebuilder - when finishing parsing (when parser sees
</html>end tag), functiondocument::finishedparsing()executed, ,domcontentloadedevent fired.
i think cssom, render, , layout tree made during/after finishedparsing can't find.
i think important functions following: (i found log important things in trace file using trace_event function)
document::finishedparsing()document::updatestyleandlayouttree()document::updateactivestyle(): makescssstylesheet,globalrulesetdocument::updatestyle(): setting style , attach layout tree
i can't find exact data structure of trees. i’m looking following structures & functions:
- data structures
cssstylesheetstylesheetcollectioncssglobalrulesetlayoutobject
- functions
element::recalcstyleelement::rebuildlayouttree
where can find data on tree structures, , sequence should follow?
=== addition === 2017.08.18 16:46 korea
i'm analysis code in $chrome/src/third_party/webkit/source/core/dom/document.cpp$document::finishedparsing() , document::updatestyleandlayouttree().
what thinking of following:
- cssom made in
document::updateactivestyle() - render tree made in
document::updatestyle() - layout tree made in
document::notifylayouttreeofsubtreechanges()(i think layout tree concept tree, , shared same structure render tree)
Comments
Post a Comment