webKit介绍

1.             WebKit介绍

1.1          WetKit架构

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

图表 3  WebKit架构

1.2          WetKit主要特点和目标

特性	说明
引擎	该项目的主要重点是内容部署在万维网上的，基于标准的技术，如HTML ，CSS ， JavaScript和DOM中。并能够嵌入WebKit在其他应用程序中，并用它作为一般用途的显示和交互引擎。
开源	WebKit应继续自由使用的两个开源和专有应用。
高性能	维持和改善的速度和内存使用是一个重要的目标。随着网页内容越来越丰富，越来越复杂，作为网络浏览器上运行的更有限的设备，需要提升性能提升，加快浏览速度。
可移植性	该WebKit项目力求解决各种需要。能把WebKit 移植到各种各样的台式机，移动，嵌入式和其他平台。WebKit将提供必要的基础设施做到这一点紧张平台集成，重用本地平台服务，并酌情提供友好嵌入的API 。
兼容性	为用户浏览网页，兼容现有的网站是必不可少的。我们致力于维护和改善兼容现有的网络内容，有时甚至不惜牺牲标准。我们利用回归测试，以保持我们的兼容性收益。
遵守标准	WebKit的目标是遵守有关的Web标准，并支持新的标准。
安全	保护用户安全的行为是至关重要的。迅速修复安全问题，以保护用户和维护他们的信任。
专注	WebKit是一个引擎，而不是浏览器。WebKit 小组不打算开发或举办一个全功能的网络浏览器基于WebKit 。而只是一个引擎，WebKit 小组专注于网站的内容，而不是全面的解决方案，需要每一个想象的技术。

图表 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

类名	描述
QGraphicsWebView	The QGraphicsWebView class allows Web content to be added to a GraphicsView
QWebDatabase	The QWebDatabase class provides access to HTML 5 databases created with JavaScript
QWebElement	The QWebElement class provides convenient access to DOM elements in a QWebFrame
QWebElementCollection	The QWebElementCollection class represents a collection of web elements
QWebFrame	The QWebFrame class represents a frame in a web page
QWebHistory	The QWebHistory class represents the history of a QWebPage
QWebHistoryInterface	The QWebHistoryInterface class provides an interface to implement link history
QWebHistoryItem	The QWebHistoryItem class represents one item in the history of a QWebPage
QWebHitTestResult	The QWebHitTestResult class provides information about the web page content after a hit test
QWebInspector	The QWebInspector class allows the placement and control of a QWebPage's inspector. The inspector allows you to see a page current hierarchy and loading statistics
QWebPage	The QWebPage class provides an object to view and edit web documents
QWebPluginFactory	The QWebPluginFactory class creates plugins to be embedded into web pages
QWebSecurityOrigin	he QWebSecurityOrigin class defines a security boundary for web sites
QWebSettings	The QWebSettings class provides an object to store the settings used by QWebPage and QWebFrame
QWebView	The QWebView class provides a widget that is used to view and edit web documents

图表 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。