WebKit Inside: 渲染树

经过CSS的匹配，就要进入渲染树的构建。

渲染树也叫RenderObject树，因为渲染树上每一个节点，都是RenderObject的子类。

首先来看一下RenderObject的继承类图。

1 RenderObject 继承类图

RenderText表示要渲染的文本。

RenderButton表示要渲染的按钮。

RenderBlockFlow表示要渲染的块级元素，比如<div>。

RenderView表示浏览器window中显示的视口(viewport)。

RenderVideo表示要渲染的视频。

RenderImage表示要渲染的图片。

RenderInline表示要渲染的内联元素，比如<span>。

2 渲染树构建时机

渲染树的构建时机在CSS匹配完成之后:

void Document::resolveStyle(ResolveStyleType type)
{
   ...
   {
      // 1. CSS 匹配
      Style::TreeResolver resolver(*this, WTFMove(m_pendingRenderTreeUpdate));
      auto styleUpdate = resolver.resolve();

      ...

      if (styleUpdate) {
            // 2. 渲染树构建
            updateRenderTree(WTFMove(styleUpdate));
            ...
      }
   }

   ...
}

代码注释1，CSS进行匹配。

代码注释2，渲染树开始构建。

调用栈如下图所示:

3 渲染树构建过程

3.1 相关类图

Document代表文档对象，从继承图上看，其继承自ContainerNode。

Element代表DOM树节点对象，从继承图上看，其继承自ContainerNode。

StyleUpdate存储所有DOM节点匹配的CSS样式。

RenderStyle存储单个DOM节点匹配的CSS样式。

RenderTreeUpdater负责整个渲染树的构建过程。

RenderTreeBuilder负责将渲染树节点添加到渲染树上，它持有RenderView，RenderView是渲染树的根节点。

RenderTreeBuilder内部持有不同渲染树节点类型的构建器，比如块级渲染树节点构建器RnederTreeBuilder::BlockFlow。

3.2 创建 RenderTreeUpdater

渲染树的构建入口函数为Document::updateRnederTree。

在这个函数内部，创建了RenderTreeUpdater对象:

void Document::updateRenderTree(std::unique_ptr<Style::Update> styleUpdate)
{
    ...
    {
      ...
        {
            // 1. 创建 RenderTreeUpdater
            RenderTreeUpdater updater(*this, callbackDisabler);
            // 2. 调用 commit 方法，继续渲染树构建
            updater.commit(WTFMove(styleUpdate));
        }
    }
}

代码注释1，创建RenderTreeUpdater对象。

代码注释2，继续渲染树的构建。

3.3 遍历 DOM 树前的准备

为了进行渲染树的构建，需要找到renderingRoot，对其进行遍历。

通常情况下，renderingRoot就是Document对象。

void RenderTreeUpdater::commit(std::unique_ptr<Style::Update> styleUpdate)
{
   ...
   // 1. 存储 CSS 匹配结果
   m_styleUpdate = WTFMove(styleUpdate);
   ...

   // 2. 遍历所有的 root 节点
   for (auto& root : m_styleUpdate->roots()) {
      if (&root->document() != m_document.ptr())
         continue;
      // 3. 找到 renderingRoot
      auto* renderingRoot = findRenderingRoot(*root);
      if (!renderingRoot)
         continue;
      // 4. 遍历 renderingRoot，构造渲染树
      updateRenderTree(*renderingRoot);
   }

   ...
}

代码注释1，存储CSS匹配结果。

代码注释2，遍历StyleUpdate对象中的roots数组。

从下文可以知道，正常情况下，roots数组里只有Document对象。

代码注释3，判断当前的root节点是否是一个合格的renderingRoot。

代码注释4，遍历找到的renderingRoot，也就是Document对象。

3.3.1 StyleUpdate 的 root 数组

那么StyleUpdate对象中的roots数组中存储的是什么呢？

在CSS匹配的过程中，当匹配完一个DOM节点的CSS样式后，会将CSS样式与这个DOM节点进行关联:

void TreeResolver::resolveComposedTree()
{
    ...
    while (it != end) {
        ...
        if (resolutionType) {
            ...
            // 1. 匹配当前 DOM 节点 element 的样式
            auto [elementUpdate, elementDescendantsToResolve] = resolveElement(element, style, *resolutionType);
            ...
            // 2. style 为当前 DOM 节点 element 匹配的样式
            style = elementUpdate.style.get();
            ...

            if (style || element.hasDisplayNone())
               // 3. 样式匹配成功，将匹配的样式与当前的 DOM 节点相关联
                m_update->addElement(element, parent.element, WTFMove(elementUpdate));
            ...
        }
        ...
        it.traverseNext();
    }

    popParentsToDepth(1);
}

void Update::addElement(Element& element, Element* parent, ElementUpdate&& elementUpdate)
{
    ...
    // 4. 向 StyleUpdate 对象中的 m_roots 数组添加对象
    addPossibleRoot(parent);
    ...
    // 5. 关联当前 DOM 节点与其匹配的样式
    m_elements.add(&element, WTFMove(elementUpdate));
}

void Update::addPossibleRoot(Element* element)
{
    if (!element) {
       // 6. 当匹配 HTML 节点时，element = nil，Document 对象增加到 m_roots 数组中
        m_roots.add(m_document.ptr());
        return;
    }
    if (element->needsSVGRendererUpdate() || m_elements.contains(element))
        // 7. 正常情况下，由于满足 m_elements.contains(element) 条件，直接返回，m_roots 里始终只有 Document 对象
        return;
    m_roots.add(element);
}

代码注释1，匹配当前DOM节点的CSS样式。

代码注释2，style为当前DOM节点匹配成功的CSS样式。

代码注释3，样式匹配成功，将样式与当前的DOM节点相关联。

也就是，将当前DOM节点与匹配的样式，存储到StyleUpdate的m_elements Map中。

代码注释4，将当前DOM节点的父节点，添加到StyleUpdate对象的m_roots数组中(前提是要满足对应的条件)。

代码注释5，将关联当前DOM节点与匹配的样式。

代码注释6，当匹配HTML节点时，它的父节点是null，因此会运行到这里，此时m_roots数组会存储Document对象。

代码注释7，正常情况下，由于会满足m_elements.contains条件，会直接返回。

比如，当匹配BODY节点时，其父节点HMTL已经存储在StyleUpdate的m_elements Map中，因此会直接返回。

所以，正常情况下，StyleUpdate的m_roots数组，只会有Document对象。

3.3.2 确认 renderingRoot

从上文可以知道，StyleUpdate的roots数组中，正常情况下，只有Document对象。

因此，这里的node参数就是Document对象。

static ContainerNode* findRenderingRoot(ContainerNode& node)
{
    if (node.renderer())
        // 1. Document 节点的 renderer() 方法返回 RenderView
        return &node;
    return findRenderingAncestor(node);
}

代码注释1，判断当前node是否有关联的RenderObject对象。

Document对象关联的RenderObject就是RenderView，因此这里直接返回。

3.4 遍历 DOM 树

渲染树是根据DOM树渲染创建出来的。

为了创建渲染树，需要遍历DOM树.

遍历DOM树的过程与《WebKit Inside: CSS 的匹配原理》中类似，本次只关心渲染树构建的过程。

void RenderTreeUpdater::updateRenderTree(ContainerNode& root)
{
    ASSERT(root.renderer());
    ASSERT(m_parentStack.isEmpty());

    m_parentStack.append(Parent(root));

    auto descendants = composedTreeDescendants(root);
    auto it = descendants.begin();
    auto end = descendants.end();

    // FIXME: https://bugs.webkit.org/show_bug.cgi?id=156172
    it.dropAssertions();

    // 1. 遍历 DOM 树
    while (it != end) {
      popParentsToDepth(it.depth());
      auto& node = *it;
      ...
      auto& element = downcast<Element>(node);
      ...
      auto* elementUpdate = m_styleUpdate->elementUpdate(element);
      ...

      // 2. 只有匹配到 CSS 样式的 DOM 节点，才有对应的渲染树节点
      if (elementUpdate)
         // 3. 创建当前 DOM 节点对应的渲染树节点
         updateElementRenderer(element, *elementUpdate);
         ...
      pushParent(element, elementUpdate);
      it.traverseNext();
    }

    popParentsToDepth(0);
}

代码注释1，遍历DOM树。

代码注释2，elementUpdate中存储着当前节点匹配成功的CSS样式，这里只有成功匹配的DOM节点，才能创建对应的渲染树节点。

因此，那些没有样式的HTML节点，比如HEAD，是不会出现在渲染树中的。

代码注释3，创建当前DOM节点对应的渲染树节点。

3.4.1 RenderTreeUpdater::Parent

上面代码中，注意到m_parentStack的代码:

void RenderTreeUpdater::updateRenderTree(ContainerNode& root)
{
   ...
   // 1. 将 root 节点，也就是 Document 添加到 m_parentStack
   m_parentStack.append(Parent(root));
   ...
   while (it != end)
   {
      ...
      // 2. 将已经创建渲染树节点的 DOM 节点，添加到 m_parentStack
      pushParent(element, elementUpdate);
      it.traverseNext();
   }
}

代码注释1，m_parentStack中加入的Parent对象，并不是《WebKit Inside: CSS 的匹配原理》中的Style::TreeResolver::Parent，而是RenderTreeUpdater::Parent。

与RenderTreeUpdater::Parent相关的类图如下:

代码注释2，当前DOM节点已经创建好了渲染树节点，将当前DOM节点以及其匹配的样式，添加到m_parentStack中。

下图给出了一个遍历DOM树时，m_parentStack变化的例子:

3.5 创建渲染树节点

void RenderTreeUpdater::updateElementRenderer(Element& element, const Style::ElementUpdate& elementUpdate)
{
   if (!elementUpdate.style)
      // 1. 没有匹配 CSS 样式的 DOM 节点不会创建对应的渲染树节点
      return;
   ...

   // 2. 如果当前 DOM 节点 display 属性为 none，也不会创建渲染树节点
   bool shouldCreateNewRenderer = !element.renderer() && !hasDisplayContentsOrNone && !(element.isInTopLayer() && renderTreePosition().parent().style().hasSkippedContent());
   if (shouldCreateNewRenderer) {
      ...
      // 3. 创建当前 DOM 节点的渲染树节点
      createRenderer(element, WTFMove(elementUpdateStyle));
      ...
      return;
   }
   ...
}

代码注释1，判断当前DOM节点有没有匹配CSS样式。

没有匹配CSS样式的DOM节点不会创建对应的渲染树节点。

代码注释2，判断当前DOM节点是否可见。

如果当前DOM节点的display属性值为none，那么也不会创建对应的渲染树节点。

代码注释3，为当前的DOM节点创建对应的渲染树节点，并添加到渲染树上。

3.5.1 渲染树节点

上面代码注释3处的函数真正的创建渲染树节点，代码如下:

void RenderTreeUpdater::createRenderer(Element& element, RenderStyle&& style)
{
   ...
   // 1. 获取当前创建的渲染树节点，要插入的位置
   RenderTreePosition insertionPosition = computeInsertionPosition();
   // 2. 创建当前 DOM 节点的渲染树节点
   auto newRenderer = element.createElementRenderer(WTFMove(style), insertionPosition);
   if (!newRenderer)
      return;

   if (!insertionPosition.parent().isChildAllowed(*newRenderer, newRenderer->style()))
      return;
   ...
   // 3. 将创建的渲染树节点，与对应的 DOM 节点关联
   element.setRenderer(newRenderer.get());
   ...
   // 4. 将创建的渲染树节点，添加到渲染树上
   m_builder.attach(insertionPosition.parent(), WTFMove(newRenderer), insertionPosition.nextSibling());
   ...
}

代码注释1，获取当前要创建的渲染树节点，其插入的位置。

RenderTreePosition前面介绍过，它持有当前DOM节点的父节点，以及父渲染树节点。

代码注释2，创建当前DOM节点的渲染树节点。

不同的DOM树节点，会覆写createElementRender方法，从而创建不同的渲染树节点。

比如，<img>节点会创建RenderImage类型的渲染树节点。

比如，<div>这种块级标签，会创建RenderBlockFlow类型的渲染树节点。

创建好的渲染树节点，与其对应的DOM节点以及匹配的CSS样式关系如下:

代码注释3，将当前DOM节点与创建好的渲染树节点相关联。

这样，DOM节点与渲染树节点，可以相互引用了。

3.6 添加渲染树节点

上面代码注释4，将新创建的渲染树节点，添加到渲染树上。

RenderTreeBuilder::attach方法接收3个参数:

第1个参数，是当前要添加渲染树节点的父渲染树节点。

第2个参数，是要添加的渲染树节点。

第3个参数，与HTML伪元素有关，正常情况下为null。

RenderTreeBuilder::attach方法会调用到RenderTreeBuilder::attachInternal方法。

在RenderTreeBuilder::attachInternal方法中，会根据当前渲染树节点的父渲染树节点类型，调用具体的Builder:

void RenderTreeBuilder::attachInternal(RenderElement& parent, RenderPtr<RenderObject> child, RenderObject* beforeChild)
{
    ...
    // 1. 如果父渲染树节点是 RenderBlockFlow，也就是块级元素，那么调用块级元素的 builder
    if (auto* parentBlockFlow = dynamicDowncast<RenderBlockFlow>(parent)) {
        blockFlowBuilder().attach(*parentBlockFlow, WTFMove(child), beforeChild);
        return;
    }
   ...
}

代码注释1，给出了块级父渲染树节点类型的例子。

如果父渲染树节点是RenderBlockFlow类型，也就是块级元素，那么就调用块级元素的Builder。

在具体的Builder内部，会有一些额外的操作，但是最终的添加过程，还是会调用到RenderTreeBuilder中:

void RenderTreeBuilder::attachToRenderElementInternal(RenderElement& parent, RenderPtr<RenderObject> child, RenderObject* beforeChild)
{
   ...
   // Take the ownership.
   // 1. 将 child 渲染树节点，添加到 parent 渲染树节点下面
   auto* newChild = parent.attachRendererInternal(WTFMove(child), beforeChild);
   ...
}

代码注释1，将child渲染树节点，添加到parent渲染树节点下面。

需要注意的是，参数bedoreChild和HTML伪元素有关，正常情况下为null。

添加的主要过程代码为:

RenderObject* RenderElement::attachRendererInternal(RenderPtr<RenderObject> child, RenderObject* beforeChild)
{
    child->setParent(this);
    ...
    ...
    {
        CheckedPtr lastChild = m_lastChild.get();
        if (lastChild)
            lastChild->setNextSibling(child.get());
        child->setPreviousSibling(lastChild.get());
    }
    m_lastChild = child.get();
    return child.release();
}

如果之前看过《WebKit Inside: DOM 树的构建》，会发现渲染树在内存中的结构，和DOM树类似:

但是习惯上，常常会将渲染树画成下面的逻辑结构，这样更方便:

4 RenderView 根节点

上面提到RenderView是渲染树的根节点。

那根节点RenderView是什么时候创建的呢？

答案就是，创建Document对象时，会将RenderView创建出来:

5 DOM 树与渲染树

从前面的介绍可以知道，渲染树是遍历DOM树创建出来的。

但是，并不是每一个DOM树上的节点，在渲染树上都有对应的节点。

如果DOM树上的节点，不会显示在屏幕上，那么，渲染树上就不会有相应的节点。

不显示在屏幕上包括:

1 该节点不会有对应的CSS样式，不如HEAD节点。

2 即使有CSS样式，但是display属性值为none，也不会在渲染树上。

上面图中，<head>节点由于不会显示在屏幕上，没有出现在渲染树上。

<h2>节点因为display属性值为none，不会出现在屏幕上，因此也没有出现在渲染树上。