由于工作需要，最近在准备一个介绍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, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。
总结：
webkit是什么？
答：Webkit是一套浏览器排版代码，已开源，主要由apple公司在维护。强调： webkit仅仅是一套排版引擎，
举个例子说明下：
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, standards compliance, stability, performance, security, portability, usability, and relative ease of understanding and modifying the code (hackability).
二． Webkit编译环境
Webkit的：/
说明：下面的几种编译方法，越往下面看越简单噢。
1. Webkit提供以下几种主要的编译环境
1). Max os X(Xcode Tools package)
2). Windows (Visual Studio) 最为常用，毕竟用winxp系统的还是多数
3).QT
4).GTK
具体的环境搭建见：/building/tools.html
2. WebKit winxp下编译小结
网上很多人抱怨webkit总是编译不过，确实， webkit没有提供一个下载代码后，直接可以用VS工具编译的方法，因为它用到了gcc编译环境，在windows下编译的话，需要安装cyg
win才行，由于它的编译脚本用的perl，又需要安装perl的环境。总之比较麻烦。
这也是因为网上的文章，有介绍QT安装环境的，有的是介绍官方webkit的安装环境的，还有的是介绍safari的，所以在网上查阅文档时一定要到你相对应的才行。
这也是因为网上的文章，有介绍QT安装环境的，有的是介绍官方webkit的安装环境的，还有的是介绍safari的，所以在网上查阅文档时一定要到你相对应的才行。
重点要注意的地方：
1. 下载Cygwin，一定要下载webkit提供的版本。
2. 用vs2005的话，一定要打SP1.
3. QuickTime SDK和directX SDK必不可少。
4.启动Cygwin ，安装方法，执行./WebkitTools/Scripts/build-webkit脚本。
3. 较简单的编译安装QT webkit
直接在QT的下载如：(该版本是我09年下半年使用的，上应该早有新版本了)
不需要cygwin, 不需要quickTime，只需要执行下面几个步骤：
1、下载安装Visual.Studio.2005，或2008；
2、将解压到某个目录下；以D:\qt4.5.0为例
3、配置环境变量：
在“我的电脑”—“属性”---“高级”---环境变量---**的用户变量---新建，
添加一个变量名为QTDIR 变量值为D:\qt4.5.0\qt-win-opensource-src-4.5.0
PATH变量值为D:\qt4.5.0\qt-win-opensource-src-4.5.0\bin
添加新的环境变量,名字为"QMAKESPEC",值为"win32-msvc2005".
4、编译源代码
通过"开始"菜单 -> "Microsoft Visual Studio 2005" -> "Visual Studio Tools", 运行命令行.
...
到qt源码的目录下,运行命令：
& -webkit
编译过程中,会问一个问题:
是否接受GPL协议,选'y'.
经过一段时间以后,qmake被编译出来了.
接着编译一大堆代码,简单的敲入nmake即可.
5、编译应用程序
>qmake
>nmake
就会在该应用程序下，就会在debug目录下生成可以执行文件。
不过我个人不太喜欢QT，只是安装了跑一跑，QT的安装环境包含了webkit的源代码，同时它自带了一个简单的Browser项目(如下):
编译运行。在Visual Studio中设置browser工程为主工程，然后编译。可以顺利编译完成，下面是运行后的效果图。
4. 最最简单的webkit学习环境-ISee
5. Isee是一位中国人移植的webkit，在winxp下用vs2008直接编译即可调试，用于学习最好，
强烈支持，也是一位同事推荐给我的，后面的代码走读主要基于该环境。
6. Isee还可以直接移植到wince平台运行噢。
7. ：le/p/iseebrowser/
备注：原作者已经不再维护了。所以webkit内核的版本号有点老。
8. webkit在vs2008中编译
见 :xjchilli.blog.163/blog/static/4534773920091016115533158/
三． Webkit整体介绍
1. Webkit的结构图(以ISee架构举例)：
cairo | 一个2D绘图库 |
casqt | Unicode处理用的库，从QT中抽取部分代码形成的 |
expat | 一个XML SAX解析器的库 |
freetype | 矢量字库接口库，用于存取ttf矢量字体文件 |
libcurl | 一个开源的url库，支持HTTP、FTP等协议 |
Libjpeg,libpng | 图像解码库 |
libxml | 基于DOM树的XML解析器 |
libxslt | XML transform engine |
pthread | Pthread库，port of the POSIX thread library |
sqlite3 | 一个小型的数据库，据称在型入式平台是存取速度最快的数据库。 开源，编译后就一个400K的 sqlite.dll。移植非常方便，纯C写的。 |
wceshunt | 一个用于Windows CE平台下的C常用函数封装库 |
Zlib | Zlib库。用于解压缩。 |
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树介绍，RenderBox
5) Layout：排版介绍
6) Css Parser模块
7) Binding-DOM与JavascriptCore绑定的功能
JavascriptCore-javascript引擎
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，开始解析。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论