webkit内核源代码导读

webkit内核源代码导读1：前言及webcore最基本的类

前言

webkit代码是目前最复杂也是最优秀的代码之一了。而且随着浏览器大战，也变得炙手可热。

但是，要理解这个代码也非常困难。

我自己也断断续续的读过不少webkit的代码，但是，经常读经常就忘了。最重要的是，很难把握它的全景。最近一段时间，因为工作需要，又需要了解内核的代码。这次，我换一种方式，从代码的结构入手，一步一步的将代码解析清楚。

webkit代码阅读的方法

webkit代码复杂程度如同一个人的身体结构。骨骼、血管、神经、肌肉、皮肤等紧密在一起，非常难以区分。但是在医学上，我们可以将各个部分分解为独立的系统来考虑，就可以比较清晰的了解人体结构。同样的方法，作用于webkit代码也是有效的。

我采用的方法，是从结构入手的。首先分解出最最重要的类以及类直接的关系，得到一个较为全局的概念，然后在一层层的细致分解下去，从而掌握整个webkit代码。

具体的方法，首先，就是抓住主干、忽略细节。 阅读过webkit的源码的人都知道，一段短短的代码，可能涉及四五个类十几个方法，而且，不明白这些代码的具体功能是什么。要理解他们，必须将那些次要的辅助性的代码排除出去（尤其是针对特殊问题的处理方法），仅留下最基本最重要的功能，以此为脉络，来掌握其意图。

其次，重点能够领会一个类或者方法的功能，而忽略其具体细节，这些细节只有在处理专门问题时，才需要考虑；

第三，对于明显独立的模块，要把它当作黑盒，需要适可而止，了解其接口和功用即可。其内部的具体工作原理，在分析该模块时,在具体分析。

webkit的源码

我所使用的webkit源码来自于chromium项目，与webkit官方的源码可能有区别。

开始，webcore最核心的类

先看图吧（这些类来自命名空间webcore)：

• Frame 类是中心类，和其他类相互关联。可以通过Frame来找到所有其他类。因此，当我们想引用一个网页时，就使用Frame类；
• FrameLoader：没有什么好说的，负责加载方面的事情；
• Document : 在网页中，具体实现是HTMLDocument，代表一个文档；
• Page : 代表一个页面，负责前进后退、Js窗口（js alert, prompt,open等函数的实现, 模态窗口以及拖拽相关的实现。和窗口系统关联是通过Chrome类
• EventHandler: 所有的键盘、鼠标、触屏事件，都是通过这个类处理的。

这些类之间有非常复杂和密切的关系，Frame周边的类的每个对象，都会包含一个Frame对象指针，当这个类需要调用其他类的接口时，就通过Frame指针找到它。例如，在Document中，通常需要访问FrameLoader的功能时，就使用 frame()->loader() 这样的方法来查找。

以上就是webkit的最基本骨架，后面的文章，将逐个分析每个部分。

webkit内核源代码导读2： FrameLoader的初步分析

从网页加载开始

阅读webkit的代码，从网页加载开始。FrameLoader就是执行加载的代码。FrameLoader的load方法是加载的入口函数。load方法有若干个重载，但是最终都会调用到一个终极load方法。 另外，load过程是异步的，并在load过程中，有多种控制加载是否继续的策略。

这些在我们分析源码的时候，都忽略掉。他们对我们理解加载的主要过程没有任何影响。

了解FrameLoader主要相关类

• DocummentLoader: 顾名思义，不讲了；
• MainResourceLoader：加载网页的Loader。网页被成为主资源，网页所引用的css, js, image等资源，被称为子资源
• CachedResourceLoader: 从缓存中获取资源
• DocumentWriter : 将获取的数据流写入到这个writer中，它可以看作一个缓冲区，它负责进行处理 （交给DocumentParser进行解析，下章将详细说明）
• 资源加载的具体工作，由专门的ResourceLaoder和Cache模块来实现，模块独立性比较高。

主资源加载过程

以一个单独的网页来说明这个过程，使用序列图

该图对FrameLoader做了高度简化，因此，在阅读源代码时，需要注意找关键点来阅读。

• 从FrameLoader的load函数开始，经过一系列处理后，它终于调用到DocumentLoader的startLoadingMainResource函数，进而调用到MainResourceLoader的load
• MainResourceLoader负责调用真正的资源加载模块。当收到数据后，资源加载模块会调用它的receivedData函数
• DocumentLoader调用FrameLoaderClient的函数可以忽略了，这是为了给外部代码一个机会来处理收到的数据。当committedData被调用后，数据被写入到DocumentWriter中
• DocumentWriter可以理解为一个缓冲区，DocumentWriter在调用DocuementParser来执行代码解析的工作。

这一部分仅是主资源加载的功能，对于子资源的加载，是通过和DocumentParser的交互来完成的。这一点在讲解解析器的时候会提到。

这里有必要提醒一下：DocumentLoader的commitData函数第一次收到数据时，它会调用DocumentWriter的begin函数。这个函数会调用DocumentWriter::createDocument来创建一个Document对象。然后从Document对象中取得一个DocumentParser对象，调用它的appendBytes方法。

DocumentWriter::createDocument方法会根据URL创建不同的Document。对于我们，感兴趣的是它会创建HTMLDocument对象。 详细可以查阅DOMImplementation::createDocument的实现。

webkit内核源代码导读3：HTML的解析过程

声明

HTML的解析过程是非常复杂的，下载、解析、脚本执行、显示是交错进行的。而且，HTML的解析器具有非常强的容错能力。

对于初次接触webkit源码的童鞋来说，是无法全面理解的。而且，本文立意也不是介绍HTMl的解析算法一类的东西。即便是我自己，对于很多东西都理解不了。

所以，本文重在解释HTML的解析过程，解说各个组成部分及功能。以后有机会，我将详细分析解析的算法。

解析过程中的重要类和功能

• Document和DocumentParser是相互引用的关系
• HTMLDocumentParser继承自ScriptableDocumentParser，在继承自DecodedDataDocumentParser。本文不讨论脚本相关问题，因此，可以忽略ScriptableDocumentParser。DecodedDataDocumentParser类主要功能就是实现字符解码功能。
• HTMLInputStream：保存解码后的字符流，可以看作一个缓冲区。和标准输入流的作用是一样的；
• HTMLTokenizer : 解析字符流解析，将字符流分解成节点（包括节点名和属性列表），注释、Doc声明、结束节点、文本（节点包含的文字），这些信息都保存在HTMLToken类中。其作用是词法解析器； 实现这个功能的主要函数是nextToken；
• HTMLTreeBuilder：它主要作用是生成DOM树，并对其语义进行检查(参阅processStartTag函数的代码）。如，如果在head标签中包含一个body标签，它就会检查出来，并报告错误。主要函数是constructTreeFromToken；
• HTMLToken：这是一个中间类，由HTMLTokenizer生成，交给HTMLTreeBuilder使用；
• HTMLConstructionSite ： 这个类是负责创建HTML元素，并最终完成DOM树组装的函数。例如，它将标签 <img> 生成一个HTMLImageElement对象。 除了一些关键的标签外（如html, body, head等），其他标签的创建，通过HTMLElementFactory来实现； 对于属性的解析，直接调用生成的Element的parserSetAttributes函数，来实现。参阅HTMLConstructionSite::createHTMLElement函数的实现；
• HTMLPreloadScanner : 这是一个负责查找和加载子资源的对象。它通过扫描节点中的 "src" , "link"等属性，找到外部连接资源后，通过CachedResourceLoader进行预加载。CachedResourceLoader是从DocumentLoader中得到的。这一点可以参考前一章。

注意：HTMLElementFactory是通过脚本生成的，在源码中没有定义。

解析过程简要说明（解析中的错误处理不是核心问题，忽略）

说明： 下图中的箭头线表示下个处理单元，并不表示函数调用。箭头线上的文字，表示箭头所指对象，被调用的函数名。

这个过程是

• 当DocumentWriter调用DocumentParser::appendBytes时(实际上是HTMLDocumentParser)，首先进行字符集转换，然后，将转换后字符集存入HTMLInputStream中
• 在HTMLDocumentParser::pumpTokenizer函数中，HTMLTokenizer::nextToken函数将字符流解析为HTMLToken对象
• HTMLToken对象将交给HTMLTreeBuilder
  • HTMLTreeBuilder分析标签，以确定标签是否是期望的（见代码HTMLTreeBuilder::processToken)
  • 调用HTMLConstructionSite的insertHTMLElement, insertHTMLHeadElement, ... 等（根据标签的类型），将他们插入到HTMLConstructionSite中
  • HTMLConstructionSite调用HTMLElementFactory::createHTMLElement(当然也不是所有的，有一部分是直接创建的）创建HTMLElement对象
  • HTMLElement的parserSetAttributes函数会被调用，用于解析属性
  • 当创建了一个元素后，该元素会被加入到当前节点中。HTMLConstructionSite::attachLater函数通过异步完成了该功能。
• HTMLToken对象将交给HTMLPreloadScanner
  • HTMLPreloadScanner的scan函数被调用
  • 生成一个PreloadTask，放在队列中
  • 从队列中取得PreloadTask，调用它的preload函数
  • PreloadTask::preload或调用CachedResouceLoader的preload，进行资源的预加载。
  • 资源预加载时，是通过资源的URL作为key，被CachedresourceLoader管理起来的，在后面需要时，通过URL来获取这些资源。
  • CachedResourceLoader对象是从DocumentLoader中获取的，ProloadTask是通过Document对象找到DocumentLoader的。
  • 详细查看代码HTMLPreloadScanner::processToken

HTMLConstructionSite使用了一种称为开发元素栈的方法，来帮助构造，英文是stack of open elements，详细可参阅http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#the-stack-of-open-elements 。对这个算法我也不是很清楚，以后再研究吧。

元素属性的设置

元素属性通过Element::parserSetAttributes函数来设置。

[cpp]  view plain copy

1. void Element::parserSetAttributes(const Vector<Attribute>& attributeVector, FragmentScriptingPermission scriptingPermission)  
2. {  
3.    ....  
4.     Vector<Attribute> filteredAttributes = attributeVector;  
5.    .....  
6.   
7.     if (document() && document()->sharedObjectPool())  
8.         <strong>m_attributeData</strong> = document()->sharedObjectPool()->cachedImmutableElementAttributeData(filteredAttributes);  
9.     else  
10.         <strong>m_attributeData</strong> = ElementAttributeData::createImmutable(filteredAttributes);  
11.   
12.     // Iterate over the set of attributes we already have on the stack in case  
13.     // attributeChanged mutates m_attributeData.  
14.     // FIXME: Find a way so we don't have to do this.  
15.     for (unsigned i = 0; i < filteredAttributes.size(); ++i)  
16.         <strong>attributeChanged</strong>(filteredAttributes[i].name(), filteredAttributes[i].value());  
17. }  

• m_attributeData 这是存储属性的对象。Element元素可以通过setAttribute和getAttribute来访问属性。
• attributeChanged函数调用parseAttribute函数。这个函数由派生类实现。它的作用是：让元素有机会根据属性创建对应的对象。如，对于HTMLImageElement类，它parseAttribute就会处理"src"属性，根据src属性值，加载图片。

资源的加载和获取

HTMLPreloadScanner发现并调用CachedresorceLoader加载资源。

CachedResourceLoader中的资源是通过URL来唯一标识的。当元素的parseAttribute被调用时，元素就会从CachedResourceLoader中取得需要的资源。

以HTMLImageElement为例。

HTMLImageElement的parseAttribute函数代码

[cpp]  view plain copy

1. void HTMLImageElement::parseAttribute(const QualifiedName& name, const AtomicString& value)  
2. {  
3.     if (name == altAttr) {  
4.        ....  
5.     } else if (name == srcAttr) {  
6.         m_imageLoader.updateFromElementIgnoringPreviousError();  
7.         ....  
8.     } else if (name ....  
9.     } else  
10.         HTMLElement::parseAttribute(name, value);  
11. }  

注意语句

[cpp]  view plain copy

1. m_imageLoader.updateFromElementIgnoringPreviousError()  

。m_imageLoader是一个HTMLImageLoader(继承自ImageLoader)对象，这个对象是负责从CachedResourceLoader中加载图片的。

ImageLoader::updateFromElementIgnoringPreviousError()调用了ImageLoader::updateFromElement函数，我们看看这个函数的实现

[cpp]  view plain copy

1. void ImageLoader::updateFromElement()  
2. {  
3.     ....  
4.     //重要：获取 src属性的值  
5.     AtomicString attr = client()->sourceElement()->getAttribute(client()->sourceElement()->imageSourceAttributeName());  
6.   
7.    ...  
8.     // Do not load any image if the 'src' attribute is missing or if it is  
9.     // an empty string.  
10.     CachedResourceHandle<CachedImage> newImage = 0;  
11.     if (!attr.isNull() && !stripLeadingAndTrailingHTMLSpaces(attr).isEmpty()) {  
12.         //重要：根据url(attr的值），创建一个request，通过该request获取图片  
13.         CachedResourceRequest request(ResourceRequest(document()->completeURL(sourceURI(attr))));  
14.         request.setInitiator(client()->sourceElement());  
15.   
16.       .....  
17.         if (m_loadManually) {  
18.             bool autoLoadOtherImages = document()->cachedResourceLoader()->autoLoadImages();  
19.            <strong> </strong>document()->cachedResourceLoader()->setAutoLoadImages(false);  
20.             newImage = new CachedImage(request.resourceRequest()); //创建image对象  
21.             newImage->setLoading(true);  
22.             newImage->setOwningCachedResourceLoader(document()->cachedResourceLoader());  
23.             document()->cachedResourceLoader()->m_documentResources.set(newImage->url(), newImage.get());  
24.             document()->cachedResourceLoader()->setAutoLoadImages(autoLoadOtherImages);  
25.         } else  
26.             newImage = document()->cachedResourceLoader()->requestImage(request); //直接获取一个cached的image对象  
27.   
28.        ....  
29. }  

从 src属性中取得url，然后根据url，从document()->cachedResourceLoader (实际上就是DocumentLoader的cachedResourceLoader对象）中得到对应的图片。