1.             WebKit介绍

1.1          WetKit架构

WebKit 主要包括三个部分WebCore、JavascriptCore 及Ports部分。WebKit 专注的核心部分主要是：分析Html,Javascript 的解析和布局渲染技术。分别在WebCore/html，JavascriptCore 和WebCore/rendering里面。

图表 3  WebKit架构

1.2          WetKit主要特点和目标

图表 4  WetKit主要特点和目标

1.3          WebKit工作流程

图表 5  WebKit工作流程

1. 用户向Shell发出页面请求后，页面的URL 或本地文件名被发送到Shell；
2. Shell 调用IO组件，把URL 传达到IO组件；
3. IO组件使用HTTP 协议或再调用本地IO获取HTML/XHTML源数据，返回Shell；
4. Shell 把IO 返回的HTML/XHTML source 提交HTML/XHTML分析器；
5. HTML/XHTML分析器分析HTML/XHTML代码，构建一棵DOM 树，树根为HTMLDocument;
6. 通过DOM 树，生成Render 树.也许对于Render 树大家不那么了解了，简单的说来，它是对DOM 树更进一步的描述，其描述的内容主要与布局渲染等CSS相关属性如left、 top、width、height、color、font等有关，因为不同的DOM 树结点可能会有不同的布局渲染属性，甚至布局时会按照标准动态生成一些 匿名节点，所以为了更加方便的描述布局及渲染，WebKit内核又生成一颗Render 树来描述DOM 树的布局渲染等特性，当然DOM 树与Render 树 不是一一对应，但可以相互关联；
7. 布局器布局现实出来。当布局管理器对可视化元素指派好位置，大小后，它就就知道了它的安身之处，也记住了它的大小，它必须要严格遵守布局管理器给它分配的位置，大小，不能擅自更改。既然知道了自己的位置，大小，剩下的就是控件根据自己的属性进行表现自己了，背景，外形等。

2.             QtWebKit介绍

2.1         Qt                                                                                                                                                                                                                                                                                          

Qt 是一个跨平台应用程序框架。通过使用 Qt，您可以一次性开发应用程序和用户界面，然后将其部署到多个桌面和嵌入式操作系统，而无需重复编写源代码。Qt 软件前身为 Trolltech （奇趣科技），2008年6月被诺基亚收购。

2.2         QtWebkit                                                                                                                                                                                                                                                                                   

QtWebkit就是webkit porting到Qt 的平台上。

图表 6  QtWebkit的架构

图表 7  web应用程序架构

2.2.1        由图表1、4可以看出Qt webkit和webkit 的区别

1. Text Handling、Painting、Networking采用的Qt的内核；
2. 更加容易使用Qt 的 API。

2.2.2        Qt的集成webkit优势

1. 快速创建包含实时网络内容和服务的应用程序；
2. 在一个应用程序中集成网络和本地内容；
3. 可以在不同平台上运行开发的web应用。

2.3          QtWebKit主要类

2.3.1        QtWebKit classes

图表 8  QtWebKit classes

2.3.2        QtWebKit类结构图

图表 9  QtWebKit类结构图

2.4          QtWebKit JavaScript Bridge

1. QWebElement.evaluateJavaScript(),QWebFrame.evaluateJavaScript()

1. Allows injecting JavaScript from C++
2. Permits document modifications

2. QWebFrame.addToJSWindowObject()

1. Exposes custom QObject
2. Signals, Slots, Properties accessible from JavaScript

2.5          基于QtWebKit的开源浏览器

2.5.1        Arora

Arora(http://code.google.com/p/arora/)是一款跨平台的开源网页浏览器，开发主要基于Qt中的QtWetKit模块,并致力于用最小最轻量的方式实现浏览器的基本功能，包括标签浏览，历史，收藏和全局CSS等。

3.             PyQtWebKit安装和使用

3.1          安装PyQtWebKit

先安装Python3.1版本。

再从http://www.riverbankcomputing.co.uk/static/Downloads/PyQt4/PyQt-Py3.1-gpl-4.7.5-1.exe下载安装QtWebKit。

安装完后，可以看到QtWebKit4.dll文件的大小是15675KB。

3.2          WebKit使用

3.2.1        WebKit Hello World

# -*- coding: utf-8 -*-

import sys

from PyQt4.QtCore import *

from PyQt4.QtGui import *

from PyQt4.QtWebKit import *

from PyQt4 import QtCore

from PyQt4.QtNetwork import *

app = QApplication(sys.argv)

win = QMainWindow()

view = QWebView(win)

view.setGeometry(0, 0, 800, 600);

view.setUrl(QUrl("http://www.google.com"))

win.show()

sys.exit(app.exec_())

3.2.2        一个简单的brower

代码见附件中的fastpatx_evergreen.py。不到300行代码实现了基本功能的浏览器，界面相对比较简单，如下图。

图表 10 brower截图

4.             WebKit性能测试

4.1          测试目标

了解使用WebKit解析HTML页面的CPU和内存使用情况。

4.2          测试环境

CPU： Intel(R) Xeon(R) CPU E5504  @ 2.00GHz 8核

MEMORY： 8G

Linux 2.6.18-164.el5内核

4.3          测试方法

使用WebKit解析排版（设置不获取页面内的链接）固定页面指定次数，查看内存使用情况，解析页面耗时。

4.4          测试代码

见附件webkit_bench_test.py

4.5          测试结果

0个页面到1个页面，内存从21M上升到29M，说明解析排版一个页面大约占用8M内存（不下载图片链接）。

解析排版1000个PAGE花费 6s内存从22M上升到44M，平均166PAGE/s。