Chromium网页Render Object Tree创建过程分析

发表于 5年以前  | 总阅读数:2607 次

在前面一文中,我们分析了网页DOM Tree的创建过程。网页DOM Tree创建完成之后,WebKit会根据它的内容创建一个Render Object Tree。Render Object Tree是和网页渲染有关的一个Tree。这意味着只有在DOM Tree中需要渲染的节点才会在Render Object Tree中有对应节点。本文接下来就分析网页Render Object Tree的创建过程。

《Android系统源代码情景分析》一书正在进击的程序员网(http://0xcc0xcd.com)中连载,点击进入!

从前面Chromium DOM Tree创建过程分析一文可以知道,每一个HTML标签在DOM Tree中都有一个对应的HTMLElement节点。相应地,在DOM Tree中每一个需要渲染的HTMLElement节点在Render Object Tree中都有一个对应的RenderObject节点,如图1所示:

图1 Render Object Tree与DOM Tree、Render Layer Tree和Graphics Layer Tree的关系

从图1还可以看到,Render Object Tree创建完成之后,WebKit还会继续根据它的内容创建一个Render Layer Tree和一个Graphics Layer Tree。本文主要关注Render Object Tree的创建过程。

从前面Chromium DOM Tree创建过程分析一文还可以知道,DOM Tree是在网页内容的下载过程中创建的。一旦网页内容下载完成,DOM Tree就创建完成了。网页的Render Object Tree与DOM Tree不一样,它是在网页内容下载完成之后才开始创建的。因此,接下来我们就从网页内容下载完成时开始分析网页的Render Object Tree的创建过程。

从前面Chromium网页URL加载过程分析一文可以知道,WebKit是通过Browser进程下载网页内容的。Browser进程一方面通过Net模块中的URLRequest类去Web服务器请求网页内容,另一方面又通过Content模块中的ResourceLoader类的成员函数OnReadCompleted不断地获得URLRequest类请求回来的网页内容,如下所示:

void ResourceLoader::OnReadCompleted(net::URLRequest* unused, int bytes_read) {  
      ......  

      CompleteRead(bytes_read);  

      ......  

      if (bytes_read > 0) {  
        StartReading(true);  // Read the next chunk.  
      } else {  
        // URLRequest reported an EOF. Call ResponseCompleted.  
        DCHECK_EQ(0, bytes_read);  
        ResponseCompleted();  
      }  
    }  

这个函数定义在文件external/chromium_org/content/browser/loader/resource_loader.cc中。

参数bytes_read表示当前这次从URLRequest类中读取回来的网页内容的长度。当这个长度值等于0的时候,就表示所有的网页内容已经读取完毕。这时候ResourceLoader类的成员函数OnReadCompleted就会调用另外一个成员函数ResponseCompleted进行下一步处理。

ResourceLoader类的成员函数ResponseCompleted的实现如下所示:

void ResourceLoader::ResponseCompleted() {
      ......

      handler_->OnResponseCompleted(request_->status(), security_info, &defer);

      ......
    }

这个函数定义在文件external/chromium_org/content/browser/loader/resource_loader.cc中。

在前面Chromium网页URL加载过程分析一文中,我们假设ResourceLoader类的成员变量handler_指向的是一个AsyncResourceHandler对象。ResourceLoader类的成员函数ResponseCompleted调用这个AsyncResourceHandler对象的成员函数OnResponseCompleted进行下一步处理。

AsyncResourceHandler类的成员函数OnResponseCompleted的实现如下所示:

void AsyncResourceHandler::OnResponseCompleted(
        const net::URLRequestStatus& status,
        const std::string& security_info,
        bool* defer) {
      const ResourceRequestInfoImpl* info = GetRequestInfo();
      ......

      ResourceMsg_RequestCompleteData request_complete_data;
      request_complete_data.error_code = error_code;
      request_complete_data.was_ignored_by_handler = was_ignored_by_handler;
      request_complete_data.exists_in_cache = request()->response_info().was_cached;
      request_complete_data.security_info = security_info;
      request_complete_data.completion_time = TimeTicks::Now();
      request_complete_data.encoded_data_length =
          request()->GetTotalReceivedBytes();
      info->filter()->Send(
          new ResourceMsg_RequestComplete(GetRequestID(), request_complete_data));
    }

这个函数定义在文件external/chromium_org/content/browser/loader/async_resource_handler.cc中。

AsyncResourceHandler类的成员函数OnResponseCompleted所做的事情是向Render进程发送一个类型为ResourceMsg_RequestComplete的IPC消息,用来通知Render进程它所请求的网页内容已下载完毕。

Render进程是通过ResourceDispatcher类的成员函数DispatchMessage接收类型为ResourceMsg_RequestComplete的IPC消息的,如下所示:

void ResourceDispatcher::DispatchMessage(const IPC::Message& message) {
      IPC_BEGIN_MESSAGE_MAP(ResourceDispatcher, message)
        ......
        IPC_MESSAGE_HANDLER(ResourceMsg_RequestComplete, OnRequestComplete)
      IPC_END_MESSAGE_MAP()
    }

这个函数定义在文件external/chromium_org/content/child/resource_dispatcher.cc中。

从这里可以看到,ResourceDispatcher类的成员函数DispatchMessage将类型为ResourceMsg_RequestComplete的IPC消息分发给另外一个成员函数OnRequestComplete处理。

ResourceDispatcher类的成员函数OnRequestComplete的实现如下所示:

void ResourceDispatcher::OnRequestComplete(
        int request_id,
        const ResourceMsg_RequestCompleteData& request_complete_data) {
      ......

      PendingRequestInfo* request_info = GetPendingRequestInfo(request_id);
      ......

      RequestPeer* peer = request_info->peer;
      ......

      peer->OnCompletedRequest(request_complete_data.error_code,
                               request_complete_data.was_ignored_by_handler,
                               request_complete_data.exists_in_cache,
                               request_complete_data.security_info,
                               renderer_completion_time,
                               request_complete_data.encoded_data_length);
    }

这个函数定义在文件external/chromium_org/content/child/resource_dispatcher.cc中。

从前面Chromium网页URL加载过程分析一文可以知道,Render进程在请求Browser进程下载指定URL对应的网页内容之前,会创建一个PendingRequestInfo对象。这个PendingRequestInfo对象以一个Request ID为键值保存在ResourceDispatcher类的内部。这个Request ID即为参数request_id描述的Request ID。因此,ResourceDispatcher类的成员函数OnRequestComplete可以通过参数request_id获得一个PendingRequestInfo对象。有了这个PendingRequestInfo对象之后,ResourceDispatcher类的成员函数OnSetDataBuffer再通过它的成员变量peer获得一个WebURLLoaderImpl::Context对象,并且调用它的成员函数OnCompletedRequest通知它下载网页内容的请求已完成。

WebURLLoaderImpl::Context类的成员函数OnCompletedRequest的实现如下所示:

void WebURLLoaderImpl::Context::OnCompletedRequest(
        int error_code,
        bool was_ignored_by_handler,
        bool stale_copy_in_cache,
        const std::string& security_info,
        const base::TimeTicks& completion_time,
        int64 total_transfer_size) {
      ......

      if (client_) {
        if (error_code != net::OK) {
          client_->didFail(loader_, CreateError(request_.url(),
                                                stale_copy_in_cache,
                                                error_code));
        } else {
          client_->didFinishLoading(
              loader_, (completion_time - TimeTicks()).InSecondsF(),
              total_transfer_size);
        }
      }

      ......
    }

这个函数定义在文件external/chromium_org/content/child/web_url_loader_impl.cc中。

从前面Chromium网页URL加载过程分析一文可以知道,WebURLLoaderImpl::Context类的成员变量client_指向的是WebKit模块中的一个ResourceLoader对象。在成功下载完成网页内容的情况下,WebURLLoaderImpl::Context类的成员函数OnCompletedRequest调用这个ResourceLoader对象的成员函数didFinishLoading通知WebKit结束解析网页内容。

ResourceLoader类的成员函数didFinishLoading的实现如下所示:

void ResourceLoader::didFinishLoading(blink::WebURLLoader*, double finishTime, int64 encodedDataLength)
    {
        ......

        m_resource->finish(finishTime);

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/fetch/ResourceLoader.cpp中。

ResourceLoader类的成员变量m_resource描述的是一个RawResource对象。这个RawResource对象的创建过程可以参考前面Chromium网页URL加载过程分析一文。ResourceLoader类的成员函数didFinishLoading调用这个RawResource对象的成员函数finish结束加载网页内容。

RawResource类的成员函数finish是从父类Resource继承下来的,它的实现如下所示:

void Resource::finish(double finishTime)
    {
        ......
        finishOnePart();
        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/fetch/Resource.cpp中。

Resource类的成员函数finish调用另外一个成员函数finishOnePart结束加载网页的内容。注意Resource类的成员函数finishOnePart的命名。有前面Chromium网页URL加载过程分析一文中,我们提到,当网页内容的MIME类型为"multipart/x-mixed-replace"时,下载回来网页内容实际是包含多个部分的,每一个部分都有着自己的MIME类型。每一个部分下载完成时,都会调用Resource类的成员函数finishOnePart进行处理。为了统一接口,对于MIME类型不是"multipart/x-mixed-replace"的网页内容而言,下载回来的网页内容也是当作一个部分进行整体处理。

Resource类的成员函数finishOnePart的实现如下所示:

void Resource::finishOnePart()
    {
        ......
        checkNotify();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/fetch/Resource.cpp中。

Resource类的成员函数finishOnePart调用另外一个成员函数checkNotify通知当前正在前处理的Resource对象的Client,它们所关注的资源,也就是网页内容,已经下载完成了。

Resource类的成员函数checkNotify的实现如下所示:

void Resource::checkNotify()
    {
        ......

        ResourceClientWalker<ResourceClient> w(m_clients);
        while (ResourceClient* c = w.next())
            c->notifyFinished(this);
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/fetch/Resource.cpp中。

从前面Chromium网页URL加载过程分析一文可以知道,在Resource类的成员变量m_clients中,保存有一个DocumentLoader对象。这个DocumentLoader对象是从ResourceClient类继承下来的,它负责创建和加载网页的文档对象。Resource类的成员函数checkNotify会调用这个DocumentLoader对象的成员函数notifyFinished通知它要加载的网页的内容已经下载完成了。

DocumentLoader类的成员函数notifyFinished的实现如下所示:

void DocumentLoader::notifyFinished(Resource* resource)
    {
        ......

        if (!m_mainResource->errorOccurred() && !m_mainResource->wasCanceled()) {
            finishedLoading(m_mainResource->loadFinishTime());
            return;
        }

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/loader/DocumentLoader.cpp中。

DocumentLoader类的成员变量m_mainResource指向的是一个RawResource对象。这个RawResource对象和前面分析的ResourceLoader类的成员变量m_resource指向的是同一个RawResource对象。这个RawResource对象代表正在请求下载的网页内容。在网页内容成功下载完成的情况下,DocumentLoader类的成员函数notifyFinished就会调用另外一个成员函数finishedLoading进行结束处理。

DocumentLoader类的成员函数finishedLoading的实现如下所示:

void DocumentLoader::finishedLoading(double finishTime)
    {
        ......

        endWriting(m_writer.get());

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/loader/DocumentLoader.cpp中。

从前面Chromium网页DOM Tree创建过程分析一文可以知道,DocumentLoader类的成员变量m_writer指向的是一个DocumentWriter对象。DocumentLoader类的成员函数finishedLoading调用另外一个成员函数endWriting告诉这个DocumentWriter对象结束对正在加载的网页内容的解析。

DocumentLoader类的成员函数endWriting的实现如下所示:

void DocumentLoader::endWriting(DocumentWriter* writer)
    {
        ......
        m_writer->end();
        .....
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/loader/DocumentLoader.cpp中。

DocumentLoader类的成员函数endWriting调用上述DocumentWriter对象的成员函数end结束对正在加载的网页内容的解析。

DocumentWriter类的成员函数end的实现如下所示:

void DocumentWriter::end()
    {
        ......

        m_parser->finish();

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/loader/DocumentWriter.cpp中。

从前面Chromium网页DOM Tree创建过程分析一文可以知道,DocumentWriter类的成员变量m_parser指向的是一个HTMLDocumentParser对象。DocumentWriter类的成员函数end调用这个HTMLDocumentParser对象的成员函数finish结束对正在加载的网页内容的解析。

HTMLDocumentParser类的成员函数finish的实现如下所示:

void HTMLDocumentParser::finish()
    {
        ......

        attemptToEnd();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/html/parser/HTMLDocumentParser.cpp中。

HTMLDocumentParser类的成员函数finish调用另外一个成员函数attemptToEnd结束对正在加载的网页内容的解析。

HTMLDocumentParser类的成员函数attemptToEnd的实现如下所示:

void HTMLDocumentParser::attemptToEnd()
    {
        // finish() indicates we will not receive any more data. If we are waiting on
        // an external script to load, we can't finish parsing quite yet.

        if (shouldDelayEnd()) {
            m_endWasDelayed = true;
            return;
        }
        prepareToStopParsing();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/html/parser/HTMLDocumentParser.cpp中。

如果网页包含外部JavaScript脚本,并且这些外部JavaScript脚本还没有下载回来,那么这时候HTMLDocumentParser类的成员函数attemptToEnd就还不能结束对正在加载的网页内容的解析,必须要等到外部JavaScript脚本下载回来之后才能进行结束。

另一方面,如果网页没有包含外部JavaScript脚本,那么HTMLDocumentParser类的成员函数attemptToEnd就会马上调用另外一个成员函数prepareToStopParsing结束对正在加载的网页内容的解析。在网页包含外部JavaScript脚本的情况下,等到这些外部JavaScript脚本下载回来处理之后,HTMLDocumentParser类的成员函数prepareToStopParsing也是同样会被调用的。因此,接下来我们就继续分析HTMLDocumentParser类的成员函数prepareToStopParsing的实现。

HTMLDocumentParser类的成员函数prepareToStopParsing的实现如下所示:

void HTMLDocumentParser::prepareToStopParsing()
    {
        ......

        attemptToRunDeferredScriptsAndEnd();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/html/parser/HTMLDocumentParser.cpp中。

HTMLDocumentParser类的成员函数prepareToStopParsing调用另外一个成员函数attemptToRunDeferredScriptsAndEnd执行那些被延后执行的JavaScript脚本,以及结束对正在加载的网页内容的解析。

HTMLDocumentParser类的成员函数attemptToRunDeferredScriptsAndEnd的实现如下所示:

void HTMLDocumentParser::attemptToRunDeferredScriptsAndEnd()
    {
        ......

        if (m_scriptRunner && !m_scriptRunner->executeScriptsWaitingForParsing())
            return;
        end();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/html/parser/HTMLDocumentParser.cpp中。

HTMLDocumentParser类的成员变量m_scriptRunner指向的是一个HTMLScriptRunner对象。HTMLDocumentParser类的成员函数attemptToRunDeferredScriptsAndEnd调用这个HTMLScriptRunner对象的成员函数executeScriptsWaitingForParsing执行那些被延后执行的JavaScript脚本之后,就会调用HTMLDocumentParser类的成员函数end结束对正在加载的网页内容的解析。

HTMLDocumentParser类的成员函数end的实现如下所示:

void HTMLDocumentParser::end()
    {
        ......

        // Informs the the rest of WebCore that parsing is really finished (and deletes this).
        m_treeBuilder->finished();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/html/parser/HTMLDocumentParser.cpp中。

HTMLDocumentParser类的成员变量m_treeBuilder指向的是一个HTMLTreeBuilder对象。HTMLDocumentParser类的成员函数end调用这个HTMLTreeBuilder对象的成员函数finished告诉它结束对网页内容的解析。

HTMLTreeBuilder类的成员函数finished的实现如下所示:

void HTMLTreeBuilder::finished()
    {
        ......

        m_tree.finishedParsing();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/html/parser/HTMLTreeBuilder.cpp中。

HTMLTreeBuilder类的成员变量m_tree描述的是一个HTMLConstructionSite对象。从前面Chromium网页DOM Tree创建过程分析一文可以知道,这个HTMLConstructionSite对象就是用来构造网页的DOM Tree的,HTMLTreeBuilder类的成员函数finished调用它的成员函数finishedParsing告诉它结束构造网页的DOM Tree。

HTMLConstructionSite类的成员函数finishedParsing的实现如下所示:

void HTMLConstructionSite::finishedParsing()
    {
        ......

        m_document->finishedParsing();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/html/parser/HTMLConstructionSite.cpp中。

HTMLConstructionSite类的成员变量m_document指向的是一个HTMLDocument对象。这个HTMLDocument对象描述的是网页的DOM Tree的根节点,HTMLConstructionSite类的成员函数finishedParsing调用它的成员函数finishedParsing通知它DOM Tree创建结束。

HTMLDocument类的成员函数finishedParsing是从父类Document继承下来的,它的实现如下所示:

void Document::finishedParsing()
    {
        ......

        if (RefPtr<LocalFrame> f = frame()) {
            ......
            const bool mainResourceWasAlreadyRequested =
                m_frame->loader().stateMachine()->committedFirstRealDocumentLoad();

            ......
            if (mainResourceWasAlreadyRequested)
                updateRenderTreeIfNeeded();

            ......
        }

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/Document.cpp中。

HTMLDocument类的成员函数finishedParsing首先判断网页的主资源是否已经请求回来了。在请求回来的情况下,才会调用另外一个成员函数updateRenderTreeIfNeeded创建一个Render Object Tree。网页的主资源,指的就是网页文本类型的内容,不包括Image、CSS和Script等资源。

HTMLDocument类的成员函数updateRenderTreeIfNeeded也是从父类Document继承下来的,它的实现如下所示:

class Document : public ContainerNode, public TreeScope, public SecurityContext, public ExecutionContext, public ExecutionContextClient
        , public DocumentSupplementable, public LifecycleContext<Document> {
        ......
    public:
        ......

        void updateRenderTreeIfNeeded() { updateRenderTree(NoChange); }

        ......
    };

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/Document.h中。

HTMLDocument类的成员函数updateRenderTreeIfNeeded调用另外一个成员函数updateRenderTree创建一个Render Object Tree。

HTMLDocument类的成员函数updateRenderTree是从父类Document继承下来的,它的实现如下所示:

void Document::updateRenderTree(StyleRecalcChange change)
    {
        ......

        updateStyle(change);

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/Document.cpp中。

Document类的成员函数updateRenderTree会调用另外一个成员函数updateStyle更新网页各个元素的CSS属性。Document类的成员函数updateStyle在更新网页各个元素的CSS属性的过程中,会分别为它们创建一个对应的Render Object。这些Render Object最终就会形成一个Render Object Tree。

Document类的成员函数updateStyle的实现如下所示:

void Document::updateStyle(StyleRecalcChange change)
    {
        ......

        if (styleChangeType() >= SubtreeStyleChange)
            change = Force;

        ......

        if (change == Force) {
            ......
            RefPtr<RenderStyle> documentStyle = StyleResolver::styleForDocument(*this);
            StyleRecalcChange localChange = RenderStyle::stylePropagationDiff(documentStyle.get(), renderView()->style());
            if (localChange != NoChange)
                renderView()->setStyle(documentStyle.release());
        }

        ......

        if (Element* documentElement = this->documentElement()) {
            ......
            if (documentElement->shouldCallRecalcStyle(change))
                documentElement->recalcStyle(change);
            ......
        }

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/Document.cpp中。

从前面Chromium网页DOM Tree创建过程分析一文可以知道,当前正在处理的Document对象实际上是一个HTMLDocument对象。这个HTMLDocument对象即为网页DOM Tree的根节点,它的子孙节点就是网页中的各个HTML标签。在DOM Tree创建之初,这些HTML标签的CSS属性还没有进行计算,因此这时候DOM Tree的根节点就会被标记为子树CSS属性需要进行计算,也就是调用当前正在处理的Document对象的成员函数styleChangeType获得的值会等于SubtreeStyleChange。在这种情况下,参数change的值也会被修改为Force,表示要对每一个HTML标签的CSS属性进行一次计算和设置。

接下来,Document类的成员函数updateStyle首先是计算根节点的CSS属性,这是通过调用StyleResolver类的静态成员函数styleForDocument实现的,接着又比较根节点新的CSS属性与旧的CSS属性是否有不同的地方。如果有不同的地方,那么就会将新的CSS属性值保存在与根节点对应的Render Object中。

从前面Chromium网页DOM Tree创建过程分析一文可以知道,DOM Tree的根节点,也就是一个HTMLDocument对象,是在解析网页内容之前就已经创建好了的,并且在创建这个HTMLDocument对象的时候,会给它关联一个Render Object。这个Render Object实际上是一个RenderView对象。这个RenderView对象就作为网页Render Object Tree的根节点。

Document类的成员函数updateStyle调用另外一个成员函数renderView()可以获得上面描述的RenderView对象。有了这个RenderView对象之后,调用它的成员函数style就可以获得它原来设置的CSS属性,同时调用它的成员函数setStyle可以给它设置新的CSS。

更新好DOM Tree的根节点的CSS属性之后,Document类的成员函数updateStyle接下来继续更新它的子节点的CSS属性,也就是网页的标签的CSS属性。从前面Chromium网页DOM Tree创建过程分析一文可以知道,网页的标签在DOM Tree中通过一个HTMLHtmlElement对象描述。这个HTMLHtmlElement对象可以通过调用当前正在处理的Document对象的成员函数documentElement获得。有了这个HTMLHtmlElement对象之后,就可以调用它的成员函数recalcStyle更新它以及它的子节点的CSS属性了。

HTMLHtmlElement类的成员函数recalcStyle是从父类Element继承下来的,它的实现如下所示:

void Element::recalcStyle(StyleRecalcChange change, Text* nextTextSibling)
    {
        ......

        if (change >= Inherit || needsStyleRecalc()) {
            ......
            if (parentRenderStyle())
                change = recalcOwnStyle(change);
            ......
        }

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/Element.cpp中。

从前面的调用过程可以知道,参数change的值等于Force,它的值是大于Inherit的。在这种情况下,如果当前正在处理的DOM节点的父节点的CSS属性已经计算好,也就是调用成员函数parentRenderStyle的返回值不等于NULL,那么Element类的成员函数recalcStyle就会重新计算当前正在处理的DOM节点的CSS属性。这是通过调用Element类的成员函数recalcOwnStyle实现的。

另一方面,如果参数change的值小于Inherit,但是当前正在处理的DOM节点记录了它的CSS属性确实发生了变化需要重新计算,也就是调用成员函数needsStyleRecalc获得的返值为true。那么Element类的成员函数recalcStyle也会调用另外一个成员函数recalcOwnStyle重新计算当前正在处理的DOM节点的CSS属性。

Element类的成员函数recalcOwnStyle的实现如下所示:

StyleRecalcChange Element::recalcOwnStyle(StyleRecalcChange change)
    {
        ......

        RefPtr<RenderStyle> oldStyle = renderStyle();
        RefPtr<RenderStyle> newStyle = styleForRenderer();
        StyleRecalcChange localChange = RenderStyle::stylePropagationDiff(oldStyle.get(), newStyle.get());

        ......

        if (localChange == Reattach) {
            AttachContext reattachContext;
            reattachContext.resolvedStyle = newStyle.get();
            ......
            reattach(reattachContext);
            ......
        }

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/Element.cpp中。

Element类的成员函数recalcOwnStyle首先调用成员函数renderStyle获得当前正处理的DOM节点的原来设置的CSS属性。由于当前正在处理的DOM节点还没有计算过CSS属性,因此前面获得的CSS属性就为空。Element类的成员函数recalcOwnStyle接下来又调用成员函数styleForRenderer计算当前正在处理的DOM节点的CSS属性,这是通过解析网页内容得到的。在这种情况下调用RenderStyle类的静态成员函数stylePropagationDiff比较前面获得的两个CSS属性,会得一个值为Reattach的返回值,表示要为当前正在处理的DOM节点创建一个Render Object,并且将这个Render Object加入到网页的Render Object Tree中去。这是通过调用Element类的成员函数reattach实现的。

Element类的成员函数reattach是从父类Node继承下来的,它的实现如下所示:

void Node::reattach(const AttachContext& context)
    {
        AttachContext reattachContext(context);
        reattachContext.performingReattach = true;

        ......

        attach(reattachContext);
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/Node.cpp中。

Node类的成员函数reattach主要是调用另外一个成员函数attach为当前正在处理的DOM节点创建一个Render Object。从前面的分析可以知道,当前正在处理的DOM节点是网页的HTML标签,也就是一个HTMLHtmlElement对象。HTMLHtmlElement类是从Element类继承下来的,Element类又是从Node类继承下来的,并且它重写了Node类的成员函数attach。因此,在我们这个情景中,Node类的成员函数reattach实际上调用的是Element类的成员函数attach。

Element类的成员函数attach的实现如下所示:

void Element::attach(const AttachContext& context)
    {
        ......

        RenderTreeBuilder(this, context.resolvedStyle).createRendererForElementIfNeeded();

        ......

        ContainerNode::attach(context);

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/Element.cpp中。

Element类的成员函数attach首先是根据当前正在处理的DOM节点的CSS属性创建一个RenderTreeBuilder对象,接着调用这个RenderTreeBuilder对象的成员函数createRendererForElementIfNeeded判断是否需要为当前正在处理的DOM节点创建的一个Render Object,并且在需要的情况下进行创建。

Element类的成员函数attach最后还会调用父类ContainerNode的成员函数attach递归为当前正在处理的DOM节点的所有子孙节点分别创建一个Render Object,从而就得到一个Render Object Tree。

接下来,我们首先分析RenderTreeBuilder类的成员函数createRendererForElementIfNeeded的实现,接着再分析ContainerNode类的成员函数attach的实现。

RenderTreeBuilder类的成员函数createRendererForElementIfNeeded的实现如下所示:

void RenderTreeBuilder::createRendererForElementIfNeeded()
    {
        ......

        Element* element = toElement(m_node);
        RenderStyle& style = this->style();

        if (!element->rendererIsNeeded(style))
            return;

        RenderObject* newRenderer = element->createRenderer(&style);
        ......

        RenderObject* parentRenderer = this->parentRenderer();
        ......

        element->setRenderer(newRenderer);
        newRenderer->setStyle(&style); // setStyle() can depend on renderer() already being set.

        parentRenderer->addChild(newRenderer, nextRenderer);
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/RenderTreeBuilder.cpp中。

RenderTreeBuilder类的成员变量m_node描述的是当前正在处理的DOM节点。这个DOM节点对象类型一定是从Element类继承下来的,因此RenderTreeBuilder类的成员函数createRendererForElementIfNeeded可以通过调用另外一个成员函数toElment将其转换为一个Element对象。

RenderTreeBuilder类的成员函数createRendererForElementIfNeeded接下来还会通过调用另外一个成员函数style获得当前正在处理的DOM节点的CSS属性对象,然后再以这个CSS属性对象为参数,调用上面获得的Element对象的成员函数rendererIsNeeded判断是否需要为当前正在处理的DOM节点创建一个Render Object。如果不需要,那么RenderTreeBuilder类的成员函数createRendererForElementIfNeeded就直接返回了。

Element类的成员函数rendererIsNeeded的实现如下所示:

bool Element::rendererIsNeeded(const RenderStyle& style)
    {
        return style.display() != NONE;
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/Element.cpp

从这里可以看到,当一个DOM节点的display属性被设置为none时,WebKit就不会为它创建一个Render Object,也就是当一个DOM节点不需要渲染或者不可见时,就不需要为它创建一个Render Object。

回到RenderTreeBuilder类的成员函数createRendererForElementIfNeeded中,假设需要为前正在处理的DOM节点创建Render Object,那么RenderTreeBuilder类的成员函数createRendererForElementIfNeeded接下来就会调用上面获得的Element对象的成员函数createRenderer为其创建一个Render Object。

为当前正在处理的DOM节点创建了Render Object之后,RenderTreeBuilder类的成员函数createRendererForElementIfNeeded接下来还做了三件事情:

1. 将新创建的Render Object与当前正在处理的DOM节点关联起来。这是通过调用Element类的成员函数setRenderer实现的。

2. 将用来描述当前正在处理的DOM节点的CSS属性对象设置给新创建的Render Object,以便新创建的Render Object后面可以根据这个CSS属性对象绘制自己。这是通过调用RenderObject类的成员函数setStyle实现的。

3. 获得与当前正在处理的DOM节点对应的Render Object,并且将新创建的Render Object作为这个Render Object的子节点,从而形成一个Render Object Tree。这是通过调用RenderObject类的成员函数addChild实现的。

接下来,我们主要分析Element类的成员函数createRenderer为一个DOM节点创建一个Render Object的过程,如下所示:

RenderObject* Element::createRenderer(RenderStyle* style)
    {
        return RenderObject::createObject(this, style);
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/Element.cpp中。

Element类的成员函数createRenderer是通过调用RenderObject类的静态成员函数createObject为当前正在处理的DOM节点创建一个Render Object的。

RenderObject类的静态成员函数createObject的实现如下所示:

RenderObject* RenderObject::createObject(Element* element, RenderStyle* style)
    {
        ......

        switch (style->display()) {
        case NONE:
            return 0;
        case INLINE:
            return new RenderInline(element);
        case BLOCK:
        case INLINE_BLOCK:
            return new RenderBlockFlow(element);
        case LIST_ITEM:
            return new RenderListItem(element);
        case TABLE:
        case INLINE_TABLE:
            return new RenderTable(element);
        case TABLE_ROW_GROUP:
        case TABLE_HEADER_GROUP:
        case TABLE_FOOTER_GROUP:
            return new RenderTableSection(element);
        case TABLE_ROW:
            return new RenderTableRow(element);
        case TABLE_COLUMN_GROUP:
        case TABLE_COLUMN:
            return new RenderTableCol(element);
        case TABLE_CELL:
            return new RenderTableCell(element);
        case TABLE_CAPTION:
            return new RenderTableCaption(element);
        case BOX:
        case INLINE_BOX:
            return new RenderDeprecatedFlexibleBox(element);
        case FLEX:
        case INLINE_FLEX:
            return new RenderFlexibleBox(element);
        case GRID:
        case INLINE_GRID:
            return new RenderGrid(element);
        }

        return 0;
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/rendering/RenderObject.cpp中。

RenderObject类的静态成员函数createObject主要是根据参数element描述的一个DOM节点的display属性值创建一个具体的Render Object。例如,如果参数element描述的DOM节点的display属性值为BLOCK或者INLINE_BLOCK,那么RenderObject类的静态成员函数createObject为它创建的就是一个类型为RenderBlockFlow的Render Object。

不管是哪一种类型的Render Object,它们都是间接从RenderBoxModelObject类继承下来的。RenderBoxModelObject类又是间接从RenderObject类继承下来的,它描述的是一个CSS Box Model,如图2所示:

图2 CSS Box Model

关于CSS Box Model的详细描述,可以参考这篇文章:CSS Box Model and Positioning。简单来说,就是一个CSS Box Model由margin、border、padding和content四部分组成。其中,margin、border和padding又分为top、bottom、left和right四个值。一个Render Object在绘制之前,会先进行Layout。Layout的目的就是确定一个Render Object的CSS Box Model的margin、border和padding值。一旦这些值确定之后,再结合content值,就可以对一个Render Object进行绘制了。

这一步执行完成后,回到Element类的成员函数attach中,接下来它会调用父类ContainerNode的成员函数attach递归为当前正在处理的DOM节点的所有子孙节点分别创建一个Render Object,从而形成一个Render Object Tree。

ContainerNode类的成员函数attach的实现如下所示:

void ContainerNode::attach(const AttachContext& context)
    {
        attachChildren(context);
        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/ContainerNode.cpp中。

ContainerNode类的成员函数attach主要是调用另外一个成员函数attachChildren递归为当前正在处理的DOM节点的所有子孙节点分别创建一个Render Object,如下所示:

inline void ContainerNode::attachChildren(const AttachContext& context)
    {
        AttachContext childrenContext(context);
        childrenContext.resolvedStyle = 0;

        for (Node* child = firstChild(); child; child = child->nextSibling()) {
            ASSERT(child->needsAttach() || childAttachedAllowedWhenAttachingChildren(this));
            if (child->needsAttach())
                child->attach(childrenContext);
        }
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/ContainerNode.h中。

从这里就可以看到,ContainerNode类的成员函数attachChildren会依次遍历当前正在处理的DOM节点的每一个子节点,并且对于需要创建Render Object的子节点,会调用它的成员函数attach进行创建,也就是调用我们前面分析过的Element类的成员函数attach进行创建。这个过程会一直重复下去,直到遍历至DOM树的叶子节点为止。这时候就会得到图1所示的Render Object Tree。

至此,网页的Render Object Tree的创建过程就分析完成了,网页的Render Object Tree是在DOM Tree构造完成时开始创建的,并且Render Object Tree的每一个节点与DOM Tree的某一个节点对应,但是又不是每一个在DOM Tree的节点在Render Object Tree中都有对应的节点,只有那些需要进行渲染的DOM节点才会在Render Object Tree中有对应的节点。

事实上,WebKit在为网页创建Render Object Tree的过程中,也会为网页创建图1所示的Render Layer Tree。关于网页Render Layer Tree的创建过程,我们将在接下来的一篇文章进行分析,敬请关注!更多的信息也可以关注老罗的新浪微博:http://weibo.com/shengyangluo

 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:1年以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:1年以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:1年以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:1年以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:1年以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:1年以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:1年以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:1年以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:1年以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:1年以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:1年以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:1年以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:1年以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:1年以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:1年以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:1年以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:1年以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:1年以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:1年以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:1年以前  |  398次阅读  |  详细内容 »
 目录