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:
htmldocumentparser
works through functionhtmldocumentparser::pumptokenizer()
- in function, calls
htmldocumentparser::constructtreefromhtmltoken()
, constructs dom tree usinghtmltreebuilder
- when finishing parsing (when parser sees
</html>
end tag), functiondocument::finishedparsing()
executed, ,domcontentloaded
event 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
,globalruleset
document::updatestyle()
: setting style , attach layout tree
i can't find exact data structure of trees. i’m looking following structures & functions:
- data structures
cssstylesheet
stylesheetcollection
cssglobalruleset
layoutobject
- functions
element::recalcstyle
element::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