chromium kernel资源加载、解析、三树合成浅析（chromium39）

标签：chromium   blink   网页的加载与三树合成   

        每次尝试去看看chromium kernel中具体逻辑的实现的时候，都会费一些时间去看代码，找逻辑。当然了，网上很多资料可以参看，但是每次看完这些资料，我都会要问一问：确实如此么？新版本的kernel是否这块逻辑更改了呢？

       所以，为了让自己释惑，还是要亲自去看源码，一点点查看调用堆栈。然后再能在整体上理解下kernel的原理。

      最近了看了看chromium kernel中，blink kernel part的网页的加载、html解析、以及三树（Dom tree、 Render Tree、Render Layer Tree）合成的逻辑。在这里总结下，以后有时间继续深入研究下。

>> chromium kernel 与blink kernel概念差异

     刚接触到chromium项目的同学，往往有个疑惑，浏览器内核中，chromium kernel 和blink kernel有什么区别呢？

    首先，要解释下，blink（webkit的google分支），是渲染内核，它是chromium kernel的一部分。提供了网页的加载、解析、渲染的基本机制，并提供port供不同的浏览器内核去实现。

     而chromium kernel是一个浏览器内核，浏览器内核是对blink的一层封装与扩展再实现，chromium kernel不仅仅要提供网页的加载、解析、渲染功能，还有提供tab的前进、后退、刷新；多tab管理；历史记录与书签；各个回调接口等等诸多工作。并且可以再实现blink kernel的一些功能，比如渲染等等。

   故总结一句：blink kernel是chromium kernel的 heart part。

>>加载

    前面的blog中，总结了网页加载中住资源的下载逻辑。这里不再赘述。

    总结一点：网页资源的加载是分步的、多线程的。

    加载过程，从加载主资源开始，然后将整个主资源下载完毕之后，形成一个字符串（或者几个字符串），然后解析，形成dom树，此时遇到需要加载的标签，比如img、srcipt等，就启动相应的子资源加载过程

>>dom 解析

   主资源下载下来，是字符串的形式存在，然后将该字符串进行标签化。具体的解析语法可以参看网上文章

   DOM树、Render Tree 及RenderLayer Tree这三颗树是并行创建的，他们的创建与子资源的加载是并行的。

>>三颗树相应关系

      Dom树到RenderTree的解析过程，可以参看文章：网上文章

      Dom树的合成中，HTMLTreeBuilder.cpp是关键对象。其中方法：HTMLTreeBuilder::constructTree是将上一步中解析到的所有token，进行dom树的构建。

    这里贴出从网页的字符串到dom树的构建堆栈：

W/WebKit  ( 7420): BackgroundHTMLParser::appendDecodedBytes
W/WebKit  ( 7420): BackgroundHTMLParser::pumpTokenizer()
W/WebKit  ( 7420): BackgroundHTMLParser::sendTokensToMainThread()
W/WebKit  ( 7420): BackgroundHTMLParser::pumpTokenizer()
W/WebKit  ( 7420): HTMLDocumentParser::didReceiveParsedChunkFromBackgroundParser
W/WebKit  ( 7420): HTMLDocumentParser::pumpPendingSpeculations()
W/WebKit  ( 7420): HTMLDocumentParser::processParsedChunkFromBackgroundParser
W/WebKit  ( 7420): HTMLDocumentParser::constructTreeFromCompactHTMLToken
W/WebKit  ( 7420): HTMLTreeBuilder::constructTree

     RenderTree的根节点是RenderView类，其中的各个节点是RenderObject。关于RenderTree中的各个节点，可以自己查看下代码，对于RenderObject有好多的子类。

    RenderTree的构建中，会创建多个RenderTreeBuilder对象。

    RenderLayerTree的节点是RenderLayer对象

   这里贴出部分从renderLayer的形成逻辑:

W/WebKit  ( 5275): Element::attach 
W/WebKit  ( 5275): RenderTreeBuilder::RenderTreeBuilder
W/WebKit  ( 5275): RenderTreeBuilder::createRendererForElementIfNeeded()
W/WebKit  ( 5275): RenderObject::setStyle
W/WebKit  ( 5275): RenderBlock::styleDidChange
W/WebKit  ( 5275): RenderLayerModelObject::styleDidChange
W/WebKit  ( 5275): RenderLayerModelObject::createLayer
W/WebKit  ( 5275): RenderLayer::RenderLayer

   对于这三棵树形成过程，分析可以参看下blog：网上文章

   之后，有时间的话，去从这里开始深入看看网页的渲染逻辑。

    blink kernel对网页的下载、解析及三棵树的合成逻辑也比较复杂，细节上的东西比较多。这里只是总结了下我最近看这块代码的逻辑。以后有时间的话，还要深入研究下这块。看看如何在内核中去操作dom树（节点的增加，或者删除）等等

chromium kernel资源加载、解析、三树合成浅析（chromium39）

标签：chromium   blink   网页的加载与三树合成   

原文地址：http://blog.csdn.net/u011882998/article/details/44493605