webkit资料教程汇总
转自 http://www.usidcbbs.com/simple/?t4848.html
一 . WebKit 简介
Webkit 是一个开放源代码的浏览器引擎 (web browser engine) ，最初的代码来自 KDE 的 KHTML 和 KJS( 均开放源代码 ) 。苹果公司在 Webkit 的基础上做了大量优化改进工作 ，此时的 Apple Webkit 已经和 Webkit 有了不少差别，最后开发出了著名的 Safari ，可以说 Safari 是一个相当成功的产品，但是 Safari 却不是开放源代码的。
基于 WebKit 的浏览器产品有：苹果的 Safari 和 iPhone ， Google 的 Chrome 和 Android ， Nokia 的 S60 ，傲游 3(Maxthon3) ；
WebKit 目前支持 HTML4/5 ， CSS1/2 ， DOM1/2 ， HTTP/FILE ， GIF/JPEG/PNG ， XML ， SVG ， RSS2.0 等；
同类的浏览器引擎有： Trident （ IE 内核）， Gechko （ Netscape, Mozilla 和 Firefox 内核）， Presto （ Opera 内核，不免费）， Tasman （ IE for MAC 内核），等等，而 WebKit 因为其功能强大、速度快而且免费备受欢迎。
二 . 用到的库：
除了平台相关的库， WebKit 需要用到的一些主要的后台库有：
ICU ： International Components for Unicode ， 一个成熟，广泛使用的一套为 C / C + + 和 Java 库提供 Unicode 的 全球化支持软件；
XSLT ： eXtensible Stylesheet Language Transformation, W3C 定义的用于 XML 文档转换的规范；
Curl ： 一个利用 URL 语法的命令行数据传输工具，基于 libcurl 。
Sqlite ： SQLite 是实现了 SQL92 标准的 SQL 数据库引擎，它能在一个库里组合数据库引擎和接口 ， 将所有数据存储于单个文件 ；
Gperf ：一个很完美的哈希函数生成器；
Flex ： Fast Lex, 快速词法分析生成器；
Bison ：语法分析生成器，可以将一段带注释的上下文无关语法转化成 LALR 或 GLR 语法；
Enchant ：一个拼写检查库，提供单词的拼写检查、纠错等功能；
三 . 代码目录结构
WebKitTools
一些测试 WebKit 实现功能的程序；
WebKitLibraries
WebKit 用到的库以及系统调用接口定义；
WebKitExamplePlugins
一些来自 Netscape 的插件，比如输入法、动画和 Cocoa 环境等；
WebKitSite: 保存了 www.webkit.org 网站的
WebKit
此目录位于 WebKit 的最上层，定义了与应用相关的一些接口，因此它是平台相关的，每个子目录都是对应平台的完整实现：
cf ： Core Foundation, MAC OS X 上的系统级 C 语言 API 接口；
win ： Windows ；
mac ： MAC OS X ；
qt ： Q Toolkit ，其公司已被 Nokia 收购；
gtk ： Gimp Toolkit ；
scripts ：一些脚本，目前只有一个关于 WebKit 版本的脚本程序；
chromium ： Google Chrome 开发平台；
wx ： wxWindows ，一种可移植的 C++ 和 Python GUI 工具箱， by Julian Smart ；
haiku ：一种开源 OS ，从 BeOS 而来， 2001 开始， 2009 发布首版；
efl: Enlightenment Foundation Libraries, Enlightenment 平台；
WebCore
WebKit 的核心部分，定义了浏览相关的数据 IO 、页面加载、脚本分析、 UI 组织、事件处理、网络分析、平台相关的具体实现等内容。
xml ：提供 xml 相关的内容；
html ：提供 html 相关的内容；其下的 Canvas 目录定义了 3D 画布以及 WebGL 库相关的内容；
wml: Wireless Markup Language ；
css ：提供 css 相关的内容；
dom ：提供 dom 相关的内容；
editing ：编辑相关的功能；
page ：浏览相关内容，并非是我们看到的一个页面，在一次浏览会话中，它只有一个实例；
rendering ：页面渲染相关的内容，在对页面脚本进行 DOM 树分析之后，需要对这些元素进行渲染和显示；
notification ：内部模块间的事件通信；
history ：页面浏览历史记录相关的内容；
svg ：矢量图形功能，有选项， --svg ；
mathml ： W3C 为网页中的数学表达式制定的规范；有编译选项， --mathml ；
loader ： 加载资源及 Cache ；
workers ：“ Web Workers 为 WEB 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建， Web Workers 就可以通过 postMessage() 向任务池发送任务请求，执行完之后再通过 postMessage() 返回消息给创建者指定的事件处理 程序 ( 通过 onmessage 进行捕获 ) 。
Web Workers 进程能够在不影响用户界面的情况下处理任务，并且，它还可以使用 XMLHttpRequest 来处理 I/O ，无论 responseXML 和 channel 属性是否为 null 。”
storage ： Web Storage 相关的内容，保存页面的数据，可以看成是 Cookie 的升级；
websockets ：与网络连接相关的内容；
bridge: 主要包含 NPPlugin(Netscape Plugin) 方面的接口访问等内容；
binding ： Dom 与 JavaScriptCore 绑定的功能；
accessibility ：提供控件的可用性相关的内容， accessibility 常用来形容对一些特殊人群的功能支持，比如残障者、老人等；
icu ：里面放了专门为 Mac OS X 10.4 编译的 icu 相关头文件 ；
platform ：提供了平台相关的具体实现，如事件响应、本地化、网络连接等；
plugins ：插件相关内容；
ForwardingHeaders ：头文件；
inspector ： Inspector 是 WebKit 提供的查看网页源代码， DOM 树，以及调试脚本的工具，本目录包含了实现此功能的内容；
Configurations ： X Code 环境相关的配置文件；
English.lproj ：本地化文件；
manual-tests ：测试用的 html 文件；
Resources ：资源，图标；
WebCore.gyp ：工程文件。 GYP （ Generate Youre Project ）是 google 自己开发了一个脚本工具，这个工具也 是采用 python 编写的。它采用了自定义的一套规则，用于生成各种工程文件；
WebCore.vcproj ： VC 工程文件；
WebCore.xcodeproj ： X Code 工程文件；
WTF ： Apple 的 C++ 库，可以看作精简的 STL ； SunSpider
一个 JavaScript 的检测程序，它不检测 DOM 或者浏览器其他的 API ，只用来检测 Javascript 。
JavaScriptGlue
JavaScriptCore ：有关 JavaScript 的相关内容，包括了脚本解释器、分析器以及执行程序；
PlanetWebkit: 一个比较灵活的 RSS 阅读器； Webkit 网站上的 Planet ：一站式的 Webkit 开发与动态信息；
四 . 体系结构
WebKit 主要包括三部分： WebKit ， WebCore ，以及 JavaScriptCore ，加上所使用的库，依托的平台，其基本的体系结构 (Architecture) 如下所示：
注意有的模块相对于下面的模块有突出，这是因为此模块与下面几个模块直接相关，比如 WebCore 模块就与JavaScriptCore 、 Libraries 和 Platforms 模块直接相关。
|
||||
|
||||
| usidc5 | 2011-10-28 21:15 |
| 阅读了Graphics in Google Chrome 之后，觉得作为浏览器内核WebKit、Gecko，为了能高效美观的显示页面的内容，选择适当的图形库非常重要。如果图形库选择不当，往往会导致页面上显示的文字、图片不美观，看起来总让人觉得别扭，更为糟糕的是排列布局出现紊乱，简直无法阅览。 从浏览器发展的历史来看，IE系列浏览器的网页布局、文字图片显示的美观程度还是相当高的，也许这与Microsoft图形显示方面的功力相关，到目前为止linux桌面显示还是与传统的windows桌面显示有相当的差距。 相 比较Firefox1.5，Firefox3.0图形显示方面也有相当大的进步，这应该归功于完全采取Cario图形库来显示页面，目前应当完全达到了 IE6的显示效果。可见图形显示的好与坏，直接决定了一款浏览器的质量以及用户接受程度。那究竟什么是图形库？其主要功能是什么？目前WebKit、 Gecko可使用哪些图形库？它们在浏览器中是如何发挥其应有的作用呢？ 一、图形库概述及其主要功能 A graphics library is a program designed to aid in rendering computer graphics to a monitor. This typically involves providing optimized versions of functions that handle common rendering tasks. This can be done purely in software and running on the CPU, common in embedded systems, or being hardware accelerated by a GPU, more common in PCs. By employing these functions, a program can assemble an image to be output to a monitor. This relieves the programmer of the task of creating and optimizing these functions, and allows them to focus on building the graphics program. 目前主要的图形库有： windows提供的GDI/GDI+、DirectX、OpenGL； 支持X的有Cario、GTK、QT、OpenGL； 其他的还有Skia(google提供)、Quartz 2D(apple提供)、wxWidget等； 一 般说来图形库只提供绘画图形，渲染文字、图片等，不管是2D还是3D，其往往不提供消息处理，简单的说来就是如何高效的在一块指定的画布上将线条、文字、 图片显示出来，其中往往涉及字体、颜色等；典型的图形库如GDI/GDI+、Cario、DirectX、Quartz 2D等； 而按钮、菜单、窗口等图形组件往往是基于图形库的基础上绘画出来的并有相对固定形状，同时一般具有消息处理功能；相关实现有GTK、QT、wxWidget、windows组件等； 其中GTK、QT、wxWidget、Skia等不仅提供图形组件，同时提供图形库的功能；而Cario则是一个纯粹的图形库，类似与Quartz 2D，目前GTK2则完全基于Cario来实现； 由 于浏览器页面元素的数量存在不确定性，将页面上的一些元素对应成图形组件可能导致一个页面使用组件过多的问题(早期的IE就曾出现使用GDI对象过多的现 象)。因此尽可能的将一个页面的所有元素显示在一个图形组件上，至于其显示交给图形库来处理，其消息响应交互交给DOM及原生窗口消息循环来完成。 从这里我们可以进一步的确认图形库在浏览器中的重要性，以及随着用户需求的增加及硬件的提升，浏览器中使用3D效果应该是一个大的方向。 二、Gecko中使用图形库Cario 1、Cario概述 Cairo is a 2D graphics library with support for multiple output devices. Currently supported output targets include the X Window System , Quartz , Win32 , image buffers, PostScript, PDF, and SVG file output. Experimental backends include OpenGL (through glitz ), XCB, BeOS, OS/2, and DirectFB. Cairo is designed to produce consistent output on all output media while taking advantage of display hardware acceleration when available (eg. through the X Render Extension). 其主要优点在于其在X、Win32、Quartz的基础上统一了图形库的操作方式，同时支持PS、PDF、SVG、PNG/JPEG等图像格式的输出，极大的方便页面的再次利用，在glitz的支持下支持部分3D效果。 2、Cario在Gecko中的使用 首先 提供一个gfxASurface抽象类，代表一块可以作画的画布；提供一个gfxContext类，它用来管理究竟如何作画，如画圆形、旋转，维护画布的状态、当前颜色、路径等，其往往需要一个gfxASurface子类实例来初始化； 其次 不同的图形输出实现不同的gfxASurface子类如gfxWindowsSurface、gfxXlibSurface、gfxQuartzSurface、gfxGlitzSurface、gfxQuartzPDFSurface、gfxPSSurface等； 其次 提供一个DeviceContextImpl类实现nsIDeviceContext接口，以描述指定原生Widget相关的字体属性及创建可以在该原生Widget上作画的nsIRenderingContext接口实现； 而nsThebesRenderingContext类实现了nsIRenderingContext接口，以供外部(如不同的DOM Node页面元素对应的不同Frame)在其上显示文字、图像、作图形等; 然后 当解析、布局完DOM页面元素后需要画出不同的页面元素时则由DeviceContextImpl类实例来创建nsThebesRenderingContext类实现，并初始化它，其初始化代码如下： nsThebesRenderingContext::Init(nsIDeviceContext* aContext, nsIWidget *aWidget) { nsThebesDeviceContext *thebesDC = static_castnsIRenderingContext接口究竟有哪些主要方法？ // RenderingContext interface class nsIRenderingContext : public nsISupports { public: ......................................................................... /** * Initialize the RenderingContext * @param aContext the device context to use. * @param aWidget the widget to hook up to * @result The result of the initialization, NS_Ok if no errors */ NS_IMETHOD Init(nsIDeviceContext* aContext, nsIWidget *aWidget) = 0; /** * Get the DeviceContext that this RenderingContext was initialized * with. This function addrefs the device context. Though it might * be better if it just returned it directly, without addrefing. * @result the device context */ NS_IMETHOD GetDeviceContext(nsIDeviceContext *& aDeviceContext) = 0; /** * Sets the forground color for the RenderingContext * @param aColor The color to set the RenderingContext to */ NS_IMETHOD SetColor(nscolor aColor) = 0; /** * Get the forground color for the RenderingContext * @return The current forground color of the RenderingContext */ NS_IMETHOD GetColor(nscolor &aColor) const = 0; /** * Sets the font for the RenderingContext * @param aFont The font to use in the RenderingContext */ NS_IMETHOD SetFont(const nsFont& aFont, nsIAtom* aLangGroup) = 0; /** * Sets the font for the RenderingContext * @param aFontMetric The font metrics representing the * font to use in the RenderingContext */ NS_IMETHOD SetFont(nsIFontMetrics *aFontMetrics) = 0; /** * Get the current fontmetrics for the RenderingContext * @return The current font of the RenderingContext */ NS_IMETHOD GetFontMetrics(nsIFontMetrics *&aFontMetrics) = 0; /** * Add in a translate to the RenderingContext's transformation matrix * @param aX The horizontal translation * @param aY The vertical translation */ NS_IMETHOD Translate(nscoord aX, nscoord aY) = 0; /** * Add in a scale to the RenderingContext's transformation matrix * @param aX The horizontal scale * @param aY The vertical scale */ NS_IMETHOD Scale(float aSx, float aSy) = 0; /** * Draw a line * @param aXO starting horiztonal coord in twips * @param aY0 starting vertical coord in twips * @param aX1 end horiztonal coord in twips * @param aY1 end vertical coord in twips */ NS_IMETHOD DrawLine(nscoord aX0, nscoord aY0, nscoord aX1, nscoord aY1) = 0; /** * Draw a rectangle * @param aRect The rectangle to draw */ NS_IMETHOD DrawRect(const nsRect& aRect) = 0; /** * Draw a string in the RenderingContext * @param aString The string to draw * @param aLength The length of the aString * @param aX Horizontal starting point of baseline * @param aY Vertical starting point of baseline. * @param aSpacing inter-character spacing to apply */ NS_IMETHOD DrawString (const char *aString, PRUint32 aLength, nscoord aX, nscoord aY, const nscoord* aSpacing = nsnull) = 0; /* * Tiles an image over an area * @param aImage Image to tile * @param aXImageStart x location where the origin (0,0) of the image starts * @param aYImageStart y location where the origin (0,0) of the image starts * @param aTargetRect area to draw to * @param aSubimageRect the subimage (in tile space) which we expect to * sample from; may be null to indicate that the whole image is * OK to sample from */ NS_IMETHOD DrawTile (imgIContainer *aImage, nscoord aXImageStart, nscoord aYImageStart, const nsRect * aTargetRect, const nsIntRect * aSubimageRect) = 0; ............................................................................... }; 其中DrawString、DrawTile方法最常用，其分别对应如何显示文字及图像。 针对图形库显示文字的基本原理可以参考Font technology and Freetype 及FreeType Glyph Conventions 。 至于图形库如何显示不同格式的图像可参考如gif 、jpeg 、png 等。 Gecko对Cario的使用还体现在对canvas标签的实现，具体可参考nsCanvasRenderingContext2D.cpp、nsHTMLCanvasElement.cpp等。 三、WebKit中使用图形库 1、WebKit支持的图形库 目 前WebKit支持的图形库包括Cairo、Gtk、Qt、Wx、Cg、Mac、Skia等，虽然不同的图形库能支持不同的平台，但其在不同平台上的显示 效果也不尽相同。至于在一个指定的平台上究竟使用何种库，则显示出很大的灵活性。就目前来看，在windows平台上可选的图形库有Cairo、Qt、 Wx、Cg、Skia等，其中Graphics in Google Chrome 阐述了Chrome关于图形库的选择。 其实从WebKit的角度来看，它通过提供一组与Gecko中nsIRenderingContext类似的公共图形接口，而不同的图形库则根据自身的不同实现了这些公共图形接口，以提供给WebCore元素使用，从而可以让WebKit支持不同的图形库。 2、WebKit支持不同图形库的实现 在WebKit中提供了一个GraphicsContext类，其中包括所有的图形接口，完全类似nsIRenderingContext，针对不同平台的特性，其定义中包含一些不同平台特有的 宏及元素定义。 在 目录webcore/platform/graphics/下的子目录Cairo、Cg、Gtk、Mac、Qt、Win、Wx分别提供了 GraphicsContext类部分方法的实现，而公共的实现则在webcore/platform/graphics /GraphicsContext.cpp中提供。 其中我们非常值得关注的方法有drawText与drawImage，其实现如下： void GraphicsContext::drawText(const TextRun& run, const IntPoint& point, int from, int to) { if (paintingDisabled()) return; font().drawText (this, run, point, from, to); } void GraphicsContext::drawImage(Image* image, const FloatRect& dest, const FloatRect& src, CompositeOperator op, bool useLowQualityScale) { if (paintingDisabled() || !image) return; float tsw = src.width(); float tsh = src.height(); float tw = dest.width(); float th = dest.height(); if (tsw == -1) tsw = image->width(); if (tsh == -1) tsh = image->height(); if (tw == -1) tw = image->width(); if (th == -1) th = image->height(); if (useLowQualityScale) { save(); setUseLowQualityImageInterpolation(true); } image->draw (this, FloatRect(dest.location(), FloatSize(tw, th)), FloatRect(src.location(), FloatSize(tsw, tsh)), op); if (useLowQualityScale) restore(); } 最 终的实现转交给类Font、Image的方法drawText、draw来实现，而不同实现如Cairo、Cg、Gtk、Mac、Qt、Win、Wx则会 针对类Font、Image分别提供部分对应的实现，而公共的实现则在webcore/platform/graphics/Font.cpp及 Image.cpp中提供。 3、不同平台GraphicsContext实例创建及使用 GraphicsContext 创建的时机往往在对应平台的WebView获得Paint消息事件时，进而将该GraphicsContext类实例传递给FrameView及其不同的 RenderObject实例，由不同的RenderObject实例来决定究竟如何来显示自身的内容，而GraphicsContext类实例提供了各 种的显示文字、图形、图像的方法以供RenderObject实例调用。其调用关系基本上与Gecko中的不同Frame对象使用 nsIRenderingContext接口方法类似。 创建GraphicsContext实例的示例如下： //Gtk static gboolean webkit_web_view_expose_event(GtkWidget* widget, GdkEventExpose* event) { WebKitWebView* webView = WEBKIT_WEB_VIEW(widget); WebKitWebViewPrivate* priv = webView->priv; Frame* frame = core(webView)->mainFrame(); GdkRectangle clip; gdk_region_get_clipbox(event->region, &clip); cairo_t* cr = gdk_cairo_create(event->window); GraphicsContext ctx(cr); ctx.setGdkExposeEvent(event); if (frame->contentRenderer() && frame->view()) { frame->view()->layoutIfNeededRecursive(); if (priv->transparent) { cairo_save(cr); cairo_set_operator(cr, CAIRO_OPERATOR_CLEAR); cairo_paint(cr); cairo_restore(cr); } frame->view()->paint(&ctx, clip); } cairo_destroy(cr); return FALSE; } //win void WebView::paintIntoBackingStore(FrameView* frameView, HDC bitmapDC, const IntRect& dirtyRect) { LOCAL_GDI_COUNTER(0, __FUNCTION__); RECT rect = dirtyRect; #if FLASH_BACKING_STORE_REDRAW HDC dc = ::GetDC(m_viewWindow); OwnPtr yellowBrush = CreateSolidBrush(RGB(255, 255, 0)); FillRect(dc, &rect, yellowBrush.get()); GdiFlush(); Sleep(50); paintIntoWindow(bitmapDC, dc, dirtyRect); ::ReleaseDC(m_viewWindow, dc); #endif FillRect(bitmapDC, &rect, (HBRUSH)GetStockObject(WHITE_BRUSH)); if (frameView && frameView->frame() && frameView->frame()->contentRenderer()) { GraphicsContext gc(bitmapDC); gc.save(); gc.clip(dirtyRect); frameView->paint(&gc, dirtyRect); gc.restore(); } } //wx void wxWebView::OnPaint(wxPaintEvent& event) { if (m_beingDestroyed || !m_impl->frame->view() || !m_impl->frame) return; wxAutoBufferedPaintDC dc(this); if (IsShown() && m_impl->frame && m_impl->frame->document()) { #if USE(WXGC) wxGCDC gcdc(dc); #endif if (dc.IsOk()) { wxRect paintRect = GetUpdateRegion().GetBox(); WebCore::IntSize offset = m_impl->frame->view()->scrollOffset(); #if USE(WXGC) gcdc.SetDeviceOrigin(-offset.width(), -offset.height()); #endif dc.SetDeviceOrigin(-offset.width(), -offset.height()); paintRect.Offset(offset.width(), offset.height()); #if USE(WXGC) WebCore::GraphicsContext* gc = new WebCore::GraphicsContext(&gcdc); #else WebCore::GraphicsContext* gc = new WebCore::GraphicsContext((wxWindowDC*)&dc); #endif if (gc && m_impl->frame->contentRenderer()) { if (m_impl->frame->view()->needsLayout()) m_impl->frame->view()->layout(); m_impl->frame->paint(gc, paintRect); } } } } //Qt void QWebFrame::render(QPainter *painter, const QRegion &clip) { if (!d->frame->view() || !d->frame->contentRenderer()) return; d->frame->view()->layoutIfNeededRecursive(); GraphicsContext ctx(painter); QVector vector = clip.rects(); WebCore::FrameView* view = d->frame->view(); for (int i = 0; i <>paint(&ctx, vector.at(i)); } /*! Render the frame into /a painter. */ void QWebFrame::render(QPainter *painter) { if (!d->frame->view() || !d->frame->contentRenderer()) return; d->frame->view()->layoutIfNeededRecursive(); GraphicsContext ctx(painter); WebCore::FrameView* view = d->frame->view(); view->paint(&ctx, view->frameGeometry()); } 4、WebKit 3D Port实现 在Clutter WebKit port 中提供了WebKit 对3D Port的支持与实现，其实现类似于Gtk+/Cairo图形库的实现，但其3D效果仅实现在Port层，没有对页面上的元素如文字、图像实现3D效果支持。 这里只是简单的了解WebKit中如何整合不同的图形库及其与WebCore的交互。要想更加深入的了解页面上的文字、图形、图像究竟是如何显示出来的，则需要更进一步的针对不同平台库进行学习与了解。 WebKit 中也支持canvas标签，该标签提供的接口与Gecko能提供的几乎一致，其具体实现可参考webcore/html /CanvasRenderingContext2D.cpp，结合GraphicsContext类的实现，应该能对canvas标签的实现有充分的理 解。 四、总结 其实关于图形库及其使用的内容非常的多，而对浏览器内核来讲能对图形库进行高效使用也是非常重要的一部分，所以在这里所谈到的内容也许只是一些皮毛，但希望能在此开阔一下了解浏览器内核特别是图形库使用方面的思路。 |
|