webkit开发学习笔记全面第一版文档格式.docx

1、举个例子说明下： google的chrome是一个浏览器对吧， 那chrome主要包含以下模块： 外壳UI（多标签，菜单，状态栏，网址输入栏等），读取网络数据的模块，排版解析模块，JS解析引擎。外壳UI是google自已写的，js引擎是google写的V8, 读取网络数据模块用的winhttp，只有排版引擎用的webkit。不知道我说清楚了没，呵呵。WebKit is an open source Web content engine for browsers and other applications. We value real-world web compatibility, stan

2、dards 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） 最为常

3、用，毕竟用winxp系统的还是多数3）.QT4）.GTK具体的环境搭建见：/www.webkit.org/building/tools.html2. WebKit winxp下编译小结网上很多人抱怨webkit总是编译不过，确实， webkit没有提供一个下载代码后，直接可以用VS工具编译的方法， 因为它用到了gcc编译环境，在windows下编译的话，需要安装cygwin才行，由于它的编译脚本用的perl，又需要安装perl的环境。总之比较麻烦。 这也是因为网上的文章，有介绍QT安装环境的，有的是介绍官方webkit的安装环境的，还有的是介绍safari的， 所以在网上查阅文档时一定要找到你

4、相对应的才行。重点要注意的地方：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

5、.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 -Visu

6、al Studio Tools, 运行命令行.到qt源码的目录下,运行命令：configure.exe -webkit编译过程中,会问一个问题:是否接受GPL协议,选y经过一段时间以后,qmake被编译出来了.接着编译一大堆代码,简单的敲入nmake即可.5、编译应用程序qmakenmake就会在该应用程序下，就会在debug目录下生成可以执行文件。不过我个人不太喜欢QT，只是安装了跑一跑，QT的安装环境包含了webkit的源代码， 同时它自带了一个简单的Browser项目（如下）:编译运行。在Visual Studio中设置browser工程为主工程，然后编译。可以顺利编译完成，下面是运行后

7、的效果图。4. 最最简单的webkit学习环境-ISee5. Isee是一位中国人移植的webkit， 在winxp下用vs2008直接编译即可调试，用于学习最好，强烈支持，也是一位同事推荐给我的，后面的代码走读主要基于该环境。6. Isee还可以直接移植到wince平台运行噢。7. 官网：备注：原作者已经不再维护了。所以webkit内核的版本号有点老。8. webkit在vs2008中编译见 :三 Webkit整体介绍1. Webkit的结构图（以ISee架构举例）：cairo 一个2D绘图库casqt Unicode处理用的库，从QT中抽取部分代码形成的expat一个XML SAX解析器的

8、库freetype矢量字库接口库，用于存取ttf矢量字体文件libcurl一个开源的url库，支持HTTP、FTP等协议Libjpeg,libpng图像解码库libxml基于DOM树的XML解析器libxsltXML transform engine pthreadPthread库， port of the POSIX thread library sqlite3一个小型的数据库，据称在型入式平台是存取速度最快的数据库。开源， 编译后就一个400K的 sqlite.dll。 移植非常方便，纯C写的。wceshunt一个用于Windows CE平台下的C常用函数封装库ZlibZlib库。用于解压

9、缩。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规范可以查

10、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-javas

11、cript引擎 1） API-基本javascript功能 2） Binding与其它功能绑定的功能,如:DOM,C,JNI 3） DerviedSource自动产生的代码 4） PCRE-Perl-Compatible Regular Expressions 5） KJS-Javascript Kernel 4. 页面的整个处理流程（简单介绍，详细流程在后面笔记中）1. 用户输入网址后，FrameLoader:load函数会接收到URL。2. 把URL 请求传给CURL库。3. CURL发出http请求，得到数据后，传给Loader，开始解析。4. 通过Dom Builder按W3C的htm

12、l规范生成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工程中，不作为单独的进程

13、存在，而是被编译成动态库。 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_mult

14、i_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

15、是一个开源的客户端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处理发送数据，它的优点是安全性较强、支持数据量大、支持字符多；缺

16、点是效率相对低；编辑修改时多使用此方法。3. cookie与session1） cookiecookie是发送到客户浏览器的文本串句柄，并保存在客户机硬盘上，可以用来在某个Web站点会话之间持久地保持数据。cookie在客户端。2） sessionsession是访问者从到达某个特定主页到离开为止的那段时间。每一访问者都会单独获得一个session，实现站点多个用户之间在所有页面中共享信息。session在服务器上。3） libcurl中使用cookie保存cookie, 使之后的链接与此链接使用相同的cookiea） 在关闭链接的时候把cookie写入指定的文件curl_easy_setop

17、t（curl, CURLOPT_COOKIEJAR, /tmp/cookie.txt）;b） 取用现在有的cookie，而不重新得到cookiecurl_easy_setopt（curl, CURLOPT_COOKIEFILE, b） http与https的区别1） Http是明文发送，任何人都可以拦截并读取内容2） Https是加密传输协议，用它传输的内容都是加密过的，https是http的扩展，其安全基础是SSL协议c） base64编码1） 为什么要使用base64编码如果要传一段包含特殊字符比较多的数据，直接上传就需要处理转意符之类的很多问题，用base64编码，它可以把数据转成可读的

18、字串，base64由a-z, A-Z, +/总计64个字符组成。2） 传送base64编码的注意事项由于base64的组成部分有加号，而加号是url中的转意字符，所以无论是get方式还是post，传到服务器的过程中，都会把加号转成空格，所以在传base64之前需要把base64编码后的加号替换成”%2B”，这样就可以正常发送了。二、 例程d） 代码#include curl/curl.hbool getUrl（char *filename） CURL *curl; CURLcode res; FILE *fp; if （fp = fopen（filename, w） = NULL） / 返回结

19、果用文件存储 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, CURLOP

20、T_URL, 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） = NULL） curl_easy_setopt（curl, CURLOPT_COOKIEFILE, / 指定cookie文件 / curl_easy_setopt（curl, CURLOPT_COOKI

21、EJAR, curl_easy_setopt（curl, CURLOPT_POSTFIELDS, &logintype=uid&u=xieyan&psw=xxx86 / 指定post内容 / 指定urlint main（void） getUrl（/tmp/get.html postUrl（/tmp/post.htmle） 编译 g+ main.cpp -o main -lcurlWebkit Loader模块介绍前面说过， webkit只是一个排版引擎，在Webkit排版/渲染一个网页之前， 它肯定需要从网络上、或者本地文件系统中读到网页的http数据，对吧，对webkit来讲，他要的就是数据

22、，不管你是从网络读的还是本地文件读的。Loader就是这样一个模块，它承上启下，不仅负责为webkit引擎提供数据，还控制着webkit的绘制。另外，它同时还与提供数据的“来源”打交道。先简单举例说明： 用户输入一个url，这时是Loader接收url请求，它把url传递给curl，设置curl的回调函数，当curl读到数据，loader把数据传递给Parser，开始生成DOM。一下面重点介绍一下与Loader相关的数据结构和模块。Frame：可以看做是浏览器外壳调用Loader的总入口，它就像我们印象中的一个网页，它关注的是页面的显示 （FrameView） 、页面数据的加载（FrameLo

23、ader） 、页面内的各种控制器 （Editor, EventHandler, ScriptController, etc.） 等等，它包含以下模块（只列出重点）：DocumentPageFrameViewRenderViewFrameLoaderDOMWindow下面分别介绍（PS: 必须要了解这些概念，不然后面的东东都无法理解）:1）Document:这个类的爷爷类是 Node ，它是 DOM 树各元素的基类； Document 有个子类是 HTMLDocument ，它是整个文档 DOM 树的根结点，这样就明白了：原来 Document 就是描述具体文档的代码，看一下它的头文件，就更明白

24、了，它的属性与方法就是围绕着各种各样的结点： Text ， Comment ， CDATASection ， Element2）Page: 我的理解是，Page与Frame（严格说是FrameView）是一一对应的，Frame关注UI，Page关注数据。现在的浏览器一般都提供同时打开多个窗口，每一个窗口对应的数据就是这个Page在管理了。 在 page.cpp 文件里，还有个重要的全局指针变量： static HashSet* allPages; 这个变量包含了所有的page 实例。3）FrameView: 可以理解为为一个网页的ViewPort, 它提供一个显示区域，同时包含的有Render

25、根节点、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）。DO