webkit技术详解文档格式.docx
《webkit技术详解文档格式.docx》由会员分享，可在线阅读，更多相关《webkit技术详解文档格式.docx（26页珍藏版）》请在冰豆网上搜索。
webkit仅仅是一套排版引擎，
举个例子说明下：
google的chrome是一个浏览器对吧，那chrome主要包含以下模块：
外壳UI（多标签，菜单，状态栏，网址输入栏等），读取网络数据的模块，排版解析模块，JS解析引擎。
外壳UI是google自已写的，js引擎是google写的V8,读取网络数据模块用的winhttp，只有排版引擎用的webkit。
不知道我说清楚了没，呵呵。
WebKitisanopensourceWebcontentengineforbrowsersandotherapplications.Wevaluereal-worldwebcompatibility,standardscompliance,stability,performance,security,portability,usability,andrelativeeaseofunderstandingandmodifyingthecode（hackability）.
二．Webkit编译环境
Webkit的官网：
http:
//www.webkit.org/
说明：
下面的几种编译方法，越往下面看越简单噢。
1.Webkit提供以下几种主要的编译环境
1）.MaxosX（XcodeToolspackage）
2）.Windows（VisualStudio）最为常用，毕竟用winxp系统的还是多数
3）.QT
4）.GTK
具体的环境搭建见：
//www.webkit.org/building/tools.html
2.WebKitwinxp下编译小结
网上很多人抱怨webkit总是编译不过，确实，webkit没有提供一个下载代码后，直接可以用VS工具编译的方法，因为它用到了gcc编译环境，在windows下编译的话，需要安装cygwin才行，由于它的编译脚本用的perl，又需要安装perl的环境。
总之比较麻烦。
这也是因为网上的文章，有介绍QT安装环境的，有的是介绍官方webkit的安装环境的，还有的是介绍safari的，所以在网上查阅文档时一定要找到你相对应的才行。
重点要注意的地方：
1.下载Cygwin，一定要下载webkit提供的版本。
2.用vs2005的话，一定要打SP1.
3.QuickTimeSDK和directXSDK必不可少。
4.启动Cygwin，安装官网方法，执行./WebkitTools/Scripts/build-webkit脚本。
3.较简单的编译安装QTwebkit
直接在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.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、编译源代码
通过"
开始"
菜单->
"
MicrosoftVisualStudio2005"
->
VisualStudioTools"
运行命令行.
...
到qt源码的目录下,运行命令：
>
configure.exe-webkit
编译过程中,会问一个问题:
是否接受GPL协议,选'
y'
经过一段时间以后,qmake被编译出来了.
接着编译一大堆代码,简单的敲入nmake即可.
5、编译应用程序
qmake
nmake
就会在该应用程序下，就会在debug目录下生成可以执行文件。
不过我个人不太喜欢QT，只是安装了跑一跑，QT的安装环境包含了webkit的源代码，同时它自带了一个简单的Browser项目（如下）:
编译运行。
在VisualStudio中设置browser工程为主工程，然后编译。
可以顺利编译完成，下面是运行后的效果图。
4.最最简单的webkit学习环境-ISee
5.Isee是一位中国人移植的webkit，在winxp下用vs2008直接编译即可调试，用于学习最好，强烈支持，也是一位同事推荐给我的，后面的代码走读主要基于该环境。
6.Isee还可以直接移植到wince平台运行噢。
7.官网：
备注：
原作者已经不再维护了。
所以webkit内核的版本号有点老。
8.webkit在vs2008中编译
见:
三．Webkit整体介绍
1.Webkit的结构图（以ISee架构举例）：
cairo
一个2D绘图库
casqt
Unicode处理用的库，从QT中抽取部分代码形成的
expat
一个XMLSAX解析器的库
freetype
矢量字库接口库，用于存取ttf矢量字体文件
libcurl
一个开源的url库，支持HTTP、FTP等协议
Libjpeg,libpng
图像解码库
libxml
基于DOM树的XML解析器
libxslt
XMLtransformengine
pthread
Pthread库，portofthePOSIXthreadlibrary
sqlite3
一个小型的数据库，据称在型入式平台是存取速度最快的数据库。
开源，编译后就一个400K的sqlite.dll。
移植非常方便，纯C写的。
wceshunt
一个用于WindowsCE平台下的C常用函数封装库
Zlib
Zlib库。
用于解压缩。
2.Webkit源代码由三大模块组成：
1）.WebCore，
2）.WebKit，
3）.JavaScriptCore。
WebCore：
排版引擎核心，WebCore包含主要以下模块：
Loader,Parser（DOM,Render）,Layout,Paint。
WebKit：
移植层，主要包含：
GUI，FileSystem,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）CssParser模块
7）Binding-DOM与JavascriptCore绑定的功能
JavascriptCore-javascript引擎
1）API-基本javascript功能
2）Binding与其它功能绑定的功能,如:
DOM,C,JNI
3）DerviedSource自动产生的代码
4）PCRE-Perl-CompatibleRegularExpressions
5）KJS-JavascriptKernel
4.页面的整个处理流程—（简单介绍，详细流程在后面笔记中）
1.用户输入网址后，FrameLoader:
:
load函数会接收到URL。
2.把URL请求传给CURL库。
3.CURL发出http请求，得到数据后，传给Loader，开始解析。
4.通过DomBuilder按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.为什么要使用libcurl
1）作为http的客户端，可以直接用socket连接服务器，然后对到的数据进行http解析，但要分析协议头，实现代理…这样太麻烦了。
2）libcurl是一个开源的客户端url传输库，支持FTP，FTPS，TFTP，HTTP，HTTPS，GOPHER，TELNET，DICT，FILE和LDAP，支持Windows，Unix，Linux等平台，简单易用，且库文件占用空间不到200K
2.get和post方式
客户端在http连接时向服务提交数据的方式分为get和post两种
1）Get方式将所要传输的数据附在网址后面，然后一起送达服务器，它的优点是效率比较高；
缺点是安全性差、数据不超过1024个字符、必须是7位的ASCII编码；
查询时经常用此方法。
2）Post通过Httppost处理发送数据，它的优点是安全性较强、支持数据量大、支持字符多；
缺点是效率相对低；
编辑修改时多使用此方法。
3.cookie与session
1）cookie
cookie是发送到客户浏览器的文本串句柄，并保存在客户机硬盘上，可以用来在某个Web站点会话之间持久地保持数据。
cookie在客户端。
2）session
session是访问者从到达某个特定主页到离开为止的那段时间。
每一访问者都会单独获得一个session，实现站点多个用户之间在所有页面中共享信息。
session在服务器上。
3）libcurl中使用cookie
保存cookie,使之后的链接与此链接使用相同的cookie
a）在关闭链接的时候把cookie写入指定的文件
curl_easy_setopt（curl,CURLOPT_COOKIEJAR,"
/tmp/cookie.txt"
）;
b）取用现在有的cookie，而不重新得到cookie
curl_easy_setopt（curl,CURLOPT_COOKIEFILE,"
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>
curl/curl.h>
boolgetUrl（char*filename）
{
CURL*curl;
CURLcoderes;
FILE*fp;
if（（fp=fopen（filename,"
w"
））==NULL）//返回结果用文件存储
returnfalse;
structcurl_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,"
curl_easy_setopt（curl,CURLOPT_WRITEDATA,fp）;
res=curl_easy_perform（curl）;
//执行
curl_slist_free_all（headers）;
curl_easy_cleanup（curl）;
}
fclose（fp）;
returntrue;
}
boolpostUrl（char*filename）
））==NULL）
curl_easy_setopt（curl,CURLOPT_COOKIEFILE,"
//指定cookie文件
//curl_easy_setopt（curl,CURLOPT_COOKIEJAR,"
curl_easy_setopt（curl,CURLOPT_POSTFIELDS,"
&
logintype=uid&
u=xieyan&
psw=xxx86"
//指定post内容
//指定url
intmain（void）
getUrl（"
/tmp/get.html"
postUrl（"
/tmp/post.html"
e）编译
g++main.cpp-omain-lcurl
WebkitLoader模块介绍
前面说过，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.）等等，它包含以下模块（只列出重点）：
Document
Page
FrameView
RenderView
FrameLoader
DOMWindow
下面分别介绍（PS:
必须要了解这些概念，不然后面的东东都无法理解）:
1）Document:
这个类的爷爷类是Node，它是DOM树各元素的基类；
Document有个子类是HTMLDocument，它是整个文档DOM树的根结点，这样就明白了：
原来Document就是描述具体文档的代码，看一下它的头文件，就更明白了，它的属性与方法就是围绕着各种各样的结点：
Text，Comment，CDATASection，Element……
2）Page:
我的理解是，Page与Frame（严格说是FrameView）是一一对应的，Frame关注UI，Page关注数据。
现在的浏览器一般都提供同时打开多个窗口，每一个窗口对应的数据就是这个Page在管理了。
在page.cpp文件里，还有个重要的全局指针变量：
staticHashSet<
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等。
后面可以详细讲讲。
升级会员 