当前位置:   article > 正文

webkit内核源代码导读_webkit内核源码

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对象)中得到对应的图片。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/1003692
推荐阅读
相关标签
  

闽ICP备14008679号