DOM树和Render树的创建-优快云博客

本文链接：https://blog.youkuaiyun.com/tuhuolong/article/details/8025414

本文详细介绍了HTML文档从解析到渲染的过程，包括Token生成、DOM树构建、Render树构建等关键步骤，为理解浏览器如何呈现网页提供了清晰的指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解析HTML Token
- - - - HTMLTreeBuilder::processToken 解析Token
- - - - HTMLTreeBuilder::processStartTag （解析到开始标签）
- - - -   HTMLConstructionSite::insertHTMLHtmlStartTagBeforeHTML
- - - -   HTMLConstructionSite::attach
- - - -   ContainerNode::parserAddChild
- - - -   Element::attach HTML
- - - - 。。。。。。
- - - -   HTMLConstructionSite::insertHTMLHeadElement head
- - - -   HTMLConstructionSite::createHTMLElement head
- - - -   HTMLElementFactory::createHTMLElement head
- - - -   HTMLConstructionSite::attach
- - - -   ContainerNode::parserAddChild
- - - -   Element::attach HEAD
- - - - 。。。。。。
- - - -   HTMLConstructionSite::insertHTMLBodyElement body
- - - -   HTMLConstructionSite::createHTMLElement body
- - - -   HTMLElementFactory::createHTMLElement body
- - - -   HTMLConstructionSite::attach
- - - -   ContainerNode::parserAddChild
- - - -   Element::attach BODY
- - - - 。。。。。。
- - - -   HTMLConstructionSite::insertHTMLElement div
- - - -   HTMLConstructionSite::createHTMLElement div 创建Node结点
- - - -   HTMLElementFactory::createHTMLElement div
- - - -   HTMLConstructionSite::attach
- - - -   ContainerNode::parserAddChild 加入DOM树
- - - -   Element::attach DIV attach渲染
- - - -   Node::createRendererIfNeeded DIV
- - - -   Node::createRendererAndStyle DIV
- - - -   Node::styleForRenderer DIV
- - - -   CSSStyleSelector::styleForElement DIV CSS选择器创建RenderStyle
- - - -   RenderStyle::create
- - - -   Node*->createRenderer DIV 创建RenderObject
- - - -   Node::setRenderer DIV 保存RenderObejct指针->Node结点
- - - -   RenderObject::setAnimatableStyle DIV
- - - -   RenderObject::setStyle 保存RenderStyle指针 ->RenderObject结点
- - - - parentNode.RenderObject::addChild 加入Render树
- - - -   HTMLConstructionSite::insertHTMLElement 。。
- - - - 。。。。。。
- - - -   HTMLTreeBuilder::processCharacter （解析到Text）
- - - -   HTMLConstructionSite::insertTextNode
- - - -   Text::create 创建Text结点
- - - -   HTMLConstructionSite::attachAtSite
- - - -   ContainerNode::parserAddChild 加入DOM树
- - - -   Text::attach attach渲染
- - - -   Node::createRendererIfNeeded #text
- - - -   Node::createRendererAndStyle #text
- - - -   Node::styleForRenderer #text
- - - -   parentNode.RenderObject.RenderStyle 继承父节点的RenderStyle
- - - -   Node*->createRenderer #text 创建RenderObject
- - - -   Node::setRenderer #text 保存RenderObejct指针->Node结点
- - - -   RenderObject::setAnimatableStyle #text
- - - -   RenderObject::setStyle 保存RenderStyle指针 ->RenderObject结点
- - - - parentNode.RenderObject::addChild 加入Render树
- - - -   HTMLTreeBuilder::processComment （解析到注释）
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -