chromium kernel资源加载、解析、三树合成浅析(chromium39)

每次尝试去看看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::appendDecodedBytesW/WebKit ( 7420): BackgroundHTMLParser::pumpTokenizer()W/WebKit ( 7420): BackgroundHTMLParser::sendTokensToMainThread()W/WebKit ( 7420): BackgroundHTMLParser::pumpTokenizer()W/WebKit ( 7420): HTMLDocumentParser::didReceiveParsedChunkFromBackgroundParserW/WebKit ( 7420): HTMLDocumentParser::pumpPendingSpeculations()W/WebKit ( 7420): HTMLDocumentParser::processParsedChunkFromBackgroundParserW/WebKit ( 7420): HTMLDocumentParser::constructTreeFromCompactHTMLTokenW/WebKit ( 7420): HTMLTreeBuilder::constructTree Dom树的节点是Node类。关于节点的类型及子类的继承等逻辑关系,可以自己查看下代码。

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

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

RenderLayerTree的节点是RenderLayer对象

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

W/WebKit ( 5275): Element::attach W/WebKit ( 5275): RenderTreeBuilder::RenderTreeBuilderW/WebKit ( 5275): RenderTreeBuilder::createRendererForElementIfNeeded()W/WebKit ( 5275): RenderObject::setStyleW/WebKit ( 5275): RenderBlock::styleDidChangeW/WebKit ( 5275): RenderLayerModelObject::styleDidChangeW/WebKit ( 5275): RenderLayerModelObject::createLayerW/WebKit ( 5275): RenderLayer::RenderLayer RenderLayer Tree是最后显示网页的重要组件。

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

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

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

当你成功得意的时候,最重要的是瞧得起别人。

chromium kernel资源加载、解析、三树合成浅析(chromium39)

相关文章:

你感兴趣的文章:

标签云: