赞
踩
前言
webkit代码是目前最复杂也是最优秀的代码之一了。而且随着浏览器大战,也变得炙手可热。
但是,要理解这个代码也非常困难。
我自己也断断续续的读过不少webkit的代码,但是,经常读经常就忘了。最重要的是,很难把握它的全景。最近一段时间,因为工作需要,又需要了解内核的代码。这次,我换一种方式,从代码的结构入手,一步一步的将代码解析清楚。
webkit代码阅读的方法
webkit代码复杂程度如同一个人的身体结构。骨骼、血管、神经、肌肉、皮肤等紧密在一起,非常难以区分。但是在医学上,我们可以将各个部分分解为独立的系统来考虑,就可以比较清晰的了解人体结构。同样的方法,作用于webkit代码也是有效的。
我采用的方法,是从结构入手的。首先分解出最最重要的类以及类直接的关系,得到一个较为全局的概念,然后在一层层的细致分解下去,从而掌握整个webkit代码。
具体的方法,首先,就是抓住主干、忽略细节。 阅读过webkit的源码的人都知道,一段短短的代码,可能涉及四五个类十几个方法,而且,不明白这些代码的具体功能是什么。要理解他们,必须将那些次要的辅助性的代码排除出去(尤其是针对特殊问题的处理方法),仅留下最基本最重要的功能,以此为脉络,来掌握其意图。
其次,重点能够领会一个类或者方法的功能,而忽略其具体细节,这些细节只有在处理专门问题时,才需要考虑;
第三,对于明显独立的模块,要把它当作黑盒,需要适可而止,了解其接口和功用即可。其内部的具体工作原理,在分析该模块时,在具体分析。
webkit的源码
我所使用的webkit源码来自于chromium项目,与webkit官方的源码可能有区别。
开始,webcore最核心的类
先看图吧(这些类来自命名空间webcore):
这些类之间有非常复杂和密切的关系,Frame周边的类的每个对象,都会包含一个Frame对象指针,当这个类需要调用其他类的接口时,就通过Frame指针找到它。例如,在Document中,通常需要访问FrameLoader的功能时,就使用 frame()->loader() 这样的方法来查找。
以上就是webkit的最基本骨架,后面的文章,将逐个分析每个部分。
从网页加载开始
阅读webkit的代码,从网页加载开始。FrameLoader就是执行加载的代码。FrameLoader的load方法是加载的入口函数。load方法有若干个重载,但是最终都会调用到一个终极load方法。 另外,load过程是异步的,并在load过程中,有多种控制加载是否继续的策略。
这些在我们分析源码的时候,都忽略掉。他们对我们理解加载的主要过程没有任何影响。
了解FrameLoader主要相关类
主资源加载过程
以一个单独的网页来说明这个过程,使用序列图
该图对FrameLoader做了高度简化,因此,在阅读源代码时,需要注意找关键点来阅读。
这一部分仅是主资源加载的功能,对于子资源的加载,是通过和DocumentParser的交互来完成的。这一点在讲解解析器的时候会提到。
这里有必要提醒一下:DocumentLoader的commitData函数第一次收到数据时,它会调用DocumentWriter的begin函数。这个函数会调用DocumentWriter::createDocument来创建一个Document对象。然后从Document对象中取得一个DocumentParser对象,调用它的appendBytes方法。
DocumentWriter::createDocument方法会根据URL创建不同的Document。对于我们,感兴趣的是它会创建HTMLDocument对象。 详细可以查阅DOMImplementation::createDocument的实现。
声明
HTML的解析过程是非常复杂的,下载、解析、脚本执行、显示是交错进行的。而且,HTML的解析器具有非常强的容错能力。
对于初次接触webkit源码的童鞋来说,是无法全面理解的。而且,本文立意也不是介绍HTMl的解析算法一类的东西。即便是我自己,对于很多东西都理解不了。
所以,本文重在解释HTML的解析过程,解说各个组成部分及功能。以后有机会,我将详细分析解析的算法。
解析过程中的重要类和功能
注意:HTMLElementFactory是通过脚本生成的,在源码中没有定义。
解析过程简要说明(解析中的错误处理不是核心问题,忽略)
说明: 下图中的箭头线表示下个处理单元,并不表示函数调用。箭头线上的文字,表示箭头所指对象,被调用的函数名。
这个过程是
HTMLConstructionSite使用了一种称为开发元素栈的方法,来帮助构造,英文是stack of open elements,详细可参阅http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#the-stack-of-open-elements 。对这个算法我也不是很清楚,以后再研究吧。
元素属性的设置
元素属性通过Element::parserSetAttributes函数来设置。
资源的加载和获取
HTMLPreloadScanner发现并调用CachedresorceLoader加载资源。
CachedResourceLoader中的资源是通过URL来唯一标识的。当元素的parseAttribute被调用时,元素就会从CachedResourceLoader中取得需要的资源。
以HTMLImageElement为例。
HTMLImageElement的parseAttribute函数代码
ImageLoader::updateFromElementIgnoringPreviousError()调用了ImageLoader::updateFromElement函数,我们看看这个函数的实现
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。