webkit开发学习笔记.docx

由于工作需要，最近在准备一个介绍webkit的PPT文档，我个人断断续续学习webkit 的代码也有一年多了，其间也阅读了网上的一些webkit相关技术文章，但中文的资料很少， 大部分都是english的，有些E文资料还需要翻墙。平常由于自已记性不好，去年看过的一 些模块今年再去翻时，竟然没一点印象了，悲剧所以，借此机会，把自已对webkit的理解先做下笔记，以便于以后需要时可以方便查阅。 需要说明的是，笔记记录的有我个人的理解，也有网上摘录的片段和图片，不一定正确，也 会比较凌乱，希望看到的朋友及时指正，共同进步。 Webkit的由来1. 十几年前的故事1994年，Netscape浏览器曾占据整个浏览器市场的90%，风头无二（也很嚣张）。但随 着微软推出win95后，把IE 1.0做为win95的插件发布，开始挑战Netscape的霸主地位， 到发布IE 4.x，短短三年时间，打败Netscape。这里面虽然说有与windows集成的原因， 但从本身的功能上来讲，IE从速度和对标准的支持上来讲，已真正打败了 Netscape。此阶段的浏览器可称为第一代浏览器。它的主要特点是单窗口型式。竞争的最主要是访 问速度、兼容性。原因：90年代都大多是用modem拨号上网，56K/S。2. Webkit 出生Apple公司在它的Mac OS X里，集成了基于KHTML改进型的WebKit引擎的浏览器， 命名为：Safari，当年苹果比较了 Gecko和KHTML后，之所以选择了后者，就因为它拥有 清晰的源码结构、极快的渲染速度。（KHTML是由KDE小组开发的） 随后，apple将它开源。至此，第二代浏览器，基本上是三分天下:Trident: IE系列，以Trident作为内核引擎;Gecko: Firefox 是基于 Gecko 开发；WebKit: Safari, Google Chrome,搜狗双核浏览器(集成 IE 和 chrome), QQ 浏览器 5。WebKit内核在手机上的应用也十分广泛，例如Google的手机Gphone、Apple的iPhone, Nokias Series 60 brc等所使用的Browser内核引擎，都是基于 WebKit。总结：webkit是什么？答：Webkit是一套浏览器排版代码，已开源，主要由apple公司在维护。强调：webkit 仅仅是一套排版引擎，举个例子说明下：google的chrome是一个浏览器对吧，那chrome主要包含以下模块：外壳UI (多标签， 菜单，状态栏，网址输入栏等)，读取网络数据的模块，排版解析模块，JS解析引擎。外壳UI是google自已写的，js引擎是google写的V8,读取网络数据模块用的winhttp，只 有排版引擎用的webkito不知道我说清楚了没，呵呵。WebKit is an open source Web content engine for browsers and other applications. We value real-world web compatibility, standards compliance, stability, performance, security, portability, usability, and relative ease of understanding and modifying the code (hackability).二.Webkit编译环境Webkit 的官网：http:/www.webkit.org/说明：下面的几种编译方法，越往下面看越简单噢。1. Webkit提供以下几种主要的编译环境1) . Max os X(Xcode Tools package)2) . Windows (Visual Studio) 最为常用，毕竟用winxp系统的还是多数3) .QT4) .GTK具体的环境搭建见：http:/www.webkit.org/building/tools.html2. WebKit winxp下编译小结网上很多人抱怨webkit总是编译不过，确实，webkit没有提供一个下载代码后， 直接可以用VS工具编译的方法，因为它用到了 gcc编译环境，在windows下编译的话， 需要安装cygwin才行，由于它的编译脚本用的perl，又需要安装perl的环境。总之比 较麻烦。这也是因为网上的文章，有介绍QT安装环境的，有的是介绍官方webkit的安装环 境的，还有的是介绍safari的，所以在网上查阅文档时一定要找到你相对应的才行。重点要注意的地方:1. 下载Cygwin, 一定要下载webkit提供的版本。2. 用vs2005的话，一定要打SP1.3. QuickTime SDK 和 directX SDK 必不可少。4. 启动 Cygwin，安装官网方法，执行./WebkitTools/Scripts/build-webkit脚本。3.较简单的编译安装QT webkit直接在QT的官网下载如：qt-sdk-win-opensource-2009.04.exe（该版本是我09年下半年使用的，官网上应该早有新版本了）不需要cygwin,不需要quickTime，只需要执行下面几个步骤：1、下载安装 Visual.S.2005，或 2008；2、将 qt-sdk-win-opensource-2009.04.exe解压到某个目录下；以 D:qt4.5.0 为例3、配置环境变量：在“我的电脑”一“属性”-“高级”-环境变量-*的用户变量-新建，添加一个变量名为 QTDIR 变量值为 D:qt4.5.0qt-win-opensource-src-4.5.0PATH变量值为 D:qt4.5.0qt-win-opensource-src-4.5.0bin添加新的环境变量，名字为"QMAKESPEC”,值为"win32-msvc2005”.4、编译源代码通过”开始"菜单-> "Microsoft Visual Studio 2005" -> "Visual Studio Tools",运行命令行.到qt源码的目录下，运行命令：>configure.exe -webkit编译过程中，会问一个问题：是否接受GPL协议，选'y'.经过一段时间以后,qmake被编译出来了.接着编译一大堆代码，简单的敲入nmake即可.5、编译应用程序>qmake>nmake就会在该应用程序下，就会在debug目录下生成可以执行文件。不过我个人不太喜欢QT，只是安装了跑一跑，QT的安装环境包含了 webkit的源代码，同时它自带了一个简单的Browser项目（如下）:膈矗刑品骊VMware爻件（日编辑饵视图的顼目®生成山调试（凶工具（!）窗口 （也社区（口帮助（山 ;® T Lili ES tJ $ 昭> DeLug ，MM5 暮三解决方案资源管理器-broker P X.3:.3:.s:.s:.s:.3:.3:.3:.3:.3:.borderlayout broadcaetreceiver broadcaetsenderbrowsercachedtablecalculator calcjlatorbuik calcjlatorforn calendar calendarwidgi charactermai： chart chat chipdaeewizard输出显示以下输出！诅 国代码定义留口 |拒就蜡IQ1生成重新生成（已 清理四 仅用于项目（J 按配置忧化®9部署（也项目依蔽项 项目生成顺序（L， 自定爻生成规则（勇 工具生成胴序心 添加（口弓I用（日 恭加娅B引用（日 设为启动顼目（心单X专果1导查援结果口流查找符号结果调试*剪切（I）<3,粘贴（E）X移隐心重命名勉卸载项目（L） Q属性编译运行。在Visual Studio中设置browser工程为主工程，然后编译。可以顺利编译完 成，下面是运行后的效果图。4. 最最简单的webkit学习环境-ISee5. Isee是一位中国人移植的webkit,在winxp下用vs2008直接编译即可调试，用于学习 最好，强烈支持，也是一位同事推荐给我的，后面的代码走读主要基于该环境。6. Isee还可以直接移植到wince平台运行噢。7. 官网：http:/code.google.eom/p/iseebrowser/备注：原作者已经不再维护了。所以webkit内核的版本号有点老。8. webkit 在 vs2008 中编译见:三.Webkit整体介绍1. Webkit的结构图（以ISee架构举例）:cairo一个2D绘图库casqtUnicode处理用的库，从QT中抽取部分代码形成的expat一个XML SAX解析器的库freetype矢量字库接口库，用于存取ttf矢量字体文件libcurl一个开源的url库，支持HTTP、FTP等协议Libjpeg,libpng图像解码库libxml基于DOM树的XML解析器libxsltXML transform enginepthreadPthread 库，port of the POSIX thread librarysqlite3一个小型的数据库，据称在型入式平台是存取速度最快的数据 库。开源，编译后就一个400K的sqlite.dll。移植非常方便，纯C 写的。wceshunt一个用于Windows CE平台下的C常用函数封装库ZlibZlib库。用于解压缩。2. Webkit源代码由三大模块组成:1) . WebCore,2) . WebKit,3) . JavaScriptCore。WebCore：排版引擎核心，WebCore 包含主要以下模块：Loader, Parser(DOM,Render), Layout,Paint。WebKit：移植层，主要包含：GUI, File System, Thread, Text,图片编解码等与平台相 关的函数。JavaScriptCore： JS虚拟机，相对独立，主要用于操作DOM，DOM是W3C定义的规范， 主要用于定义外部可以操作的浏览器内核的接口，而webcore必须实现DOM规范。(具体的DOM规范可以查w3c.)3. WebKit分模块介绍(这里简单列出，后面再具体介绍)Webkit平台相关1) CURL网络库2) libPng, LibJpeg图形处理相关3) sqlite小型关系数据库WebCore 核心1) Loader加载资源及Cache实现(Curl)2) DOM : HTML词法分析与语法分析3) DOM : DOM节点与Render节点创建，形成DOM树4) Render： Render 树介绍，RenderBox5) Layout :排版介绍6) Css Parser 模块7) Binding-DOM 与 JavascriptCore 绑定的功能JavascriptCore-javascript 引擎1) API-基本 javascript 功能2) Binding与其它功能绑定的功能，如:DOM,C,JNI3) DerviedSource自动产生的代码4) PCRE-Perl-Compatible Regular Expressions5) KJS-Javascript Kernel4.页面的整个处理流程一(简单介绍，详细流程在后面笔记中)1. 用户输入网址后，FrameLoader:load函数会接收到URL。2. 把URL请求传给CURL库。3. CURL发出http请求，得到数据后，传给Loader，开始解析。4. 通过Dom Builder按 W3C的html规范生成Dom树5. 如果有javascript，JSEngine就通过ECMA-262标准完善Dom树6. 在生成DOM树的同时，同步生成Render树。7. 解析完后，调用Layout排版8. Paint 出来Webkit-libCurl 库介绍前面有说道webkit仅仅是一个页面排版的引擎，所以，对webkit来说，网页数据(html 文件，图片，.css,.js文件)的请求与接收都是通过第三方的库：libCurl来处理。打开webkit开发工程(.sln)即可以看到，libcurl可以被静态或动态链接到主工程中。Libcurl就是指的curl,只是在webkit工程中，不作为单独的进程存在，而是被编译成动 态库。webkit主要用到curl的以下功能：1) Http 协议。包含：Get, put, Post, Cookie 管理。2) https 协议。3) 本地文件缓存。(前进，后退管理)Webkit具体调用了哪些curl接口，详见后面Loader模块介绍章节。这里简单列举：1) curl_global_init(CURL_GLOBAL_ALL);2) curl_multi_init()3) curl_share_init()4) curl_share_setopt()5) curl_easy_getinfo()6) curl_multi_fdset()7) curl_multi_perform()8) curl_multi_info_read()9) curl_multi_cleanup()10) curl_share_cleanup()11) curl_global_cleanup();可以看到，由于webkit要支持同时请求多个http数据，所以用到的是curl的multi接口。在介绍Loader之前，先介绍一下libcurl，打下基础。以下附一篇libcurl的介绍：一、 概念1. 为什么要使用libcurl1) 作为http的客户端，可以直接用socket连接服务器，然后对到的数据进行http 解析，但要分析协议头，实现代理这样太麻烦了。2) libcurl是一个开源的客户端url传输库，支持FTP，FTPS，TFTP，HTTP，HTTPS， GOPHER，TELNET，DICT，FILE 和 LDAP，支持 Windows，Unix，Linux 等平台，简单易用，且 库文件占用空间不到200K2. get和post方式客户端在http连接时向服务提交数据的方式分为get和post两种1) Get方式将所要传输的数据附在网址后面，然后一起送达服务器，它的优点是效 率比较高；缺点是安全性差、数据不超过1024个字符、必须是7位的ASCII编码；查询时 经常用此方法。2) Post通过Http post处理发送数据，它的优点是安全性较强、支持数据量大、支 持字符多；缺点是效率相对低；编辑修改时多使用此方法。3. cookie 与 session1) cookiecookie是发送到客户浏览器的文本串句柄，并保存在客户机硬盘上，可以用来在某个Web 站点会话之间持久地保持数据。cookie在客户端。2) sessionsession是访问者从到达某个特定主页到离开为止的那段时间。每一访问者都会单独获得一 个session，实现站点多个用户之间在所有页面中共享信息。session在服务器上。3) libcurl 中使用 cookie保存cookie,使之后的链接与此链接使用相同的cookiea) 在关闭链接的时候把cookie写入指定的文件curl_easy_setopt(curl, CURLOPT_COOKIEJAR, "/tmp/cookie.txt");b) 取用现在有的cookie，而不重新得到cookiecurl_easy_setopt(curl, CURLOPT_COOKIEFILE, "/tmp/cookie.txt");b) http与https的区别1) Http是明文发送，任何人都可以拦截并读取内容2) Https是加密传输协议，用它传输的内容都是加密过的，https是http的扩展，其 安全基础是SSL协议c) base64 编码1)为什么要使用base64编码如果要传一段包含特殊字符比较多的数据，直接上传就需要处理转意符之类的很多问题，用 base64编码，它可以把数据转成可读的字串，base64由a-z, A-Z, +/总计64个字符组成。2) 传送base64编码的注意事项由于base64的组成部分有加号，而加号是url中的转意字符，所以无论是get方式还是post， 传到服务器的过程中，都会把加号转成空格，所以在传base64之前需要把base64编码后的 加号替换成”2B”，这样就可以正常发送了。 二、例程d) 代码 #include <stdio.h> #include <curl/curl.h> bool getUrl(char *filename) CURL *curl; CURLcode res; FILE *fp; if (fp = fopen(filename, "w") = NULL) / 返回结果用文件存储 return false; struct curl_slist *headers = NULL; headers = curl_slist_append(headers, "Accept: Agent-007"); curl = curl_easy_init(); / 初始化 if (curl) curl_easy_setopt(curl, CURLOPT_PROXY "10.99.60.201:8080");/ 代理 curl_easy_setopt(curl, CURLOPT_HTTPHEADER, headers);/ 改协议头 curl_easy_setopt(curl,CURLOPT_URL," 81"); curl_easy_setopt(curl, CURLOPT_WRITEDATA, fp); res = curl_easy_perform(curl); / 执彳亍 curl_slist_free_all(headers); curl_easy_cleanup(curl); fclose(fp); return true; bool postUrl(char *filename) CURL *curl; CURLcode res; FILE *fp; if (fp = fopen(filename, "w") = NULL) return false; curl = curl_easy_init(); if (curl)curl_easy_setopt(curl, CURLOPT_COOKIEFILE, "/tmp/cookie.txt"); / 指定 cookie 文件 / curl_easy_setopt(curl, CURLOPT_COOKIEJAR, "/tmp/cookie.txt");curl_easy_setopt(curl,CURLOPT_POSTFIELDS,"&logintype=uid&u=xieyan&psw=xxx86"); / 指定 post 内容 curl_easy_setopt(curl, CURLOPT_PROXY "10.99.60.201:8080");curl_easy_setopt(curl, CURLOPT_URL, " /指定urlcurl_easy_setopt(curl, CURLOPT_WRITEDATA, fp);res = curl_easy_perform(curl);curl_easy_cleanup(curl);fclose(fp);return true;int main(void)getUrl("/tmp/get.html");postUrl("/tmp/post.html");e) 编译g+ main.cpp -o main -lcurlWebkit Loader模块介绍前面说过，webkit只是一个排版引擎，在Webkit排版/渲染一个网页之前，它肯定需 要从网络上、或者本地文件系统中读到网页的http数据，对吧，对webkit来讲，他要的就 是数据，不管你是从网络读的还是本地文件读的。Loader就是这样一个模块，它承上启下，不仅负责为webkit引擎提供数据，还控制着 webkit的绘制。另外，它同时还与提供数据的“来源”打交道。先简单举例说明：用户输入一个url，这时是Loader接收url请求，它把url传递给curl，设置curl的回调函 数，当curl读到数据，loader把数据传递给Parser，开始生成DOM。一.下面重点介绍一下与Loader相关的数据结构和模块。Frame:可以看做是浏览器外壳调用Loader的总入口，它就像我们印象中的一个网页，它关 注的是页面的显示(FrameView)、页面数据的加载(FrameLoader)、页面内的各种控制器 (Editor, EventHandler, Scriptcontroller, etc.)等等，它包含以下模块(只列出重点)：DocumentPageFrameViewRenderViewFrameLoaderDOMWindow下面分别介绍(PS:必须要了解这些概念，不然后面的东东都无法理解)：1) Document:这个类的爷爷类是Node，它是DOM树各元素的基类；Document有个子类是HTMLDocument，它是整个文档DOM树的根结点，这样就明白了：原来Document就 是描述具体文档的代码，看一下它的头文件，就更明白了，它的属性与方法就是围绕着各种 各样的结点：Text， Comment， CDATASection， Element2) Page:我的理解是，Page与Frame(严格说是FrameView)是一一对应的，Frame关注UI，Page 关注数据。现在的浏览器一般都提供同时打开多个窗口，每一个窗口对应的数据就是这个 Page在管理了。在page.cpp文件里，还有个重要的全局指针变量：static HashSet<Page*>* allPages;这 个变量包含了所有的page实例。3) FrameView:可以理解为为一个网页的ViewPort,它提供一个显示区域，同时包含的有 Render根节点、layout排版相关接口、Scroll相关等。FrameView是Layout排版的总入口。4) RenderView:与FrameView差不多，只是分工不同，它管理与Render树相关的东东。5) FrameLoader：重点，FrameLoader 类将 Documents 加载到 Frames。当点击一个链接时， FrameLoader创建一个新的处于“policy”状态的DocumentLoader对象，一旦webkit指示 FrameLoader 将本次加载视为一个导航(navigation)， FrameLoader 就推动 DocumentLoader 进 入“provisional”状态，(在该状态，DocumentLoader发调用CURL发起一个网络请求，并等 待是html还是下载文件。)同时,DocumentLoader会创建一个MainResourceLoader对象(该 对象在后面单独介绍)。6) 。DOMWindow:实现了 Dom的一些接口，如CreateNode等。后面可以详细讲讲。上面介绍的概念比较多，我也不晓得好不好理解，没理解也不怕，多去看看代码，这是必须 的。另外看看下面的图，就会清晰很多的。二、Webkit的Loader有两条加载数据的主线：（从上图可以看到）1. MainResourceLoader： 该模块主要加载主网页请求。后面称为MainResource。2. DocLoader：该模块除了主网页外的所有子请求，如:.js文件，图片资源，.css文件。 后 面称为 SubResource。MainResource 部分：FrameLoader->DocumentLoader->MainResourceLoader-ResourceHandle DocumentLoader 经历 状态：1）"policy" 2） "provisional" 3） "commited"分别是等待、作为 navigation 发送 network request、文件下载完毕Subresource 部分：DocLoader->Cache->CacheObjects example:CacheImage->SubresourceLoader->ResourceHandle 当请求一个资源时，首先查看 Cache 中是 否存在该对象，如果存在直接返回；如果不存在，创建该Cache对象（如CacheImage），然 后创建一个SubresourceLoader，加载资源。举例说明：加载图片时，DocLoader首先询问Cache,在内存中是否也存在（CachedImage对象），如 果已存在，则直接加载，即省了时间又省了流量。如果图片不在Cache中，Cache首先创 建一个新的CachedImage对象来代表该图片，然后由CachedImage对象调用Loader对象发 起一个网络请求，Loader对象创建SubResourceLoader。后面的流程就一样了， SubResourceLoader 也是直接把 ResourceHandle 打交道的。接下来跟踪一下Loader发送请求的代码实现：1. 用户输入URL后，最先调用的接口是：FrameLoader:load(const ResourceRequest& request)ResourceRequest 包含了：KURL(处理 url 的一个类)、setHTTPHeaderField、setHTTPContentType等与 HTTP 头部相关的函 数2. Load()通过 ResourceRequest数据调用 createDocumentLoader(request, substituteData来仓0 建一个 DocumentLoader。3. Load()函数继续给 request 设置 HttpAccept, Cache-Control HTTP头等信息。4. 设置 FrameLoader:checkNavigationPolicy函数进入"Policy"状态。5. 判断该url是否在Cache中等一系列状态判断后，进入DocumentLoader:startLoadingMainResource 函数准备加载 MainResource。该函数首先会创建 调用 MainResourceLoader。6. 进入 MainResourceLoader:load 函数，调用 illSendRequest(r, ResourceResponse()做发送请 求前的准备。7. 调用PolicyCheck检查policy的状态后，进入 FrameLoader:callContinueLoadAfterNavigationPolicy 继续往下走。8:在 MainResourceLoader:loadNow(ResourceRequest& r)函数里创建 ResourceHandle,在创建 ResourceHandle函数中，调用start函数，start函数把ResourceHandle自已添加到 ResourceHandleManager 的 m_resourceHandleList 队列里。同时，调用m_downloadTimer.startOneShot激活网页请求下载的定时器。(这是个毫秒级 的定时器，采用定时器的原因也是为了实现异步的请法)可以看到U m_downloadTimer 的定义： Timer<ResourceHandleManager> m_downloadTimer; m_downloadTimer是实现的一个定时器模块类，在它的构造函数里已经传入了回调函数的地址：ResourceHandleManager:downloadTimerCallback。9. 一路返回到Load()函数，并返回到调用源，函数执行完毕。10. ResourceHandleManager:downloadTimerCallback 回调函数被定时器调用。11. 可以看到downloadTimerCallback函数的代码：调用 libcurl 库的接口 curl_multi_fdset, curl_multi_perform等查询数据。以下调试时Loader执行流程的函数调用栈截图:!WebCore:ReeourceHandie:£tart(WebCore:Frame * frame=0sO21aedd8ijl'12IWebCore 2 ResourceHandle !create(const Web匚倒 iResourcekequest & request=-. ,'h WebCore: iResourceHandleClient 弟 clii ! WebCore: MainResoureeLocider: JoaciNo Web Cere: ResourceRequest & r=M，行斗口2 + 皈女字节!WebCore:MainResourceLoader: :load(const Web<ore:ResourceRequest-0c.r=7(. .-j-? corst WebCore:SubstituteD<ita &.substitL!Webtore: DccumentLoader: :kartLoadingNainResource(unsigned long identiFier=3).- Q'SOl + 0x2e 字玛! WebCore; FrameLaader; continueLoad Af ter Will5LibrriitFornn( WebCore: Polity Action _formal=PolicyUse)行 3跄 S 十 0x16 字节 !WebCore:FrameLoader:continueLoadAfterNavigationPolicy(const WebCore:ResourceRequest & request=.-R'WTFiiPassR IWabCore: FrameLaader: callContinueLoadAfterMavigationPohcvciicI * argurmen 1=0x02186640, Yon st WebCore: :R.esourceRec !WebCore:PolicyCheck:callfbool shouldContinue=true)行4799 4- 0x3b 字节IWebGore: FrameL&ader: i-toritinu&AfterPJavigstionPolicWebCorePolicyAction policy=PolKyU5e)行3792i.! WebKit: FrameLoaderClient: dispatch Decide PdicyForNavigationActionpeid (WebCo re: P ol icy Action J： pclii/Function=0K00415 ! WebCore: FrameLc?ader: ch&ckMavi gat io nPalicy (const WebCore: ResourceRequest &. request=-(, ,，h WebCore:DQCum&ntLQac ! WebCore; Fwm 乩 aader; Io ad Wi thDocume ntLoade r (:We bCore: DocumentLo ader * - oader=0x0Z3ca6 70j WebCore; FrameLoad' !WebCore:TrameLaader:load(WebCore:Docum已ntEed巳r * newDocumentLoader=0xO23ca670)行跛花! WebCore: Fra m eLaader: Io ad( const WebCore: Resource Request & request=-(. ； ；const WebCo re: ?5ubsti tuteData & substitui! WebCore: FrameL&ader!: Io ad( const WebCore: Fie source Request行如如 4口必e 字节!WebVipw: :lod(con5t WebCore:R.esoufceRequest 板request.彳亍 1 日时；!WebView: :lod(const WebCore: :5tring &url=,.)行 1.83W + 0x66 字节!WebView; ;lQd(can5t har_t * url=0oj3110)行 1627 十位跆字节II nflrlTahiFifti/nnnl-'iirhflr h i irlsriYnl ?F1 P inh FnriTifll=171 行A14webkit应用场景再举例：用户给出一个URL （直接输入或者点击链接或者JavaScript解析等方式）。然后浏览 器外壳调用FrameLoader来装载页面。FrameLoader首先检查一些条件（policyCheck（）， 如URL是否非空、URL是否可达，用户是否取消等等。然后通过DocumentLoader启动 一个 MainResourceLoader 来装载页面。MainResourceLoader 调用 net