Introduce to WebKit2
如需转载，请注明出处！ WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 WebKit2是为WebKit引擎而设计的支持单独进程模型的API层。将Web的内容（Javascript，HTML，布局等）处理与应用程序UI分离，分别运行在两个不同的进程之中。这种分离的进程模型和Google的Chrome浏览器有几分类似，不同的是WebKit2将从引擎内部原生的支持这种多进程机制。通过将内容和展现相分离的方式，可以更加有效的提高浏览器的运行效率。 WebKit2提供了一套基于C语言的非阻塞API接口，为了实现WebKit2引擎中对这些API接口的非阻塞调用，WebKit2在设计的时候采用了以下几个方面的技术： 以通知的方式回调客户端函数（比如，didFinishLoadForFrame)，通过这种机制可以告知client发生了什么事情（目前WebKit版本中也大量的使用了该技术，用来通知client事件的发生） 以策略方式回调客户端函数（比如，decidePolicyForNavigationAction)，当引擎执行某一项操作时，通过该机制由实现具体功能的client来决定是否该操作被执行。 策略设置（例如WKContextSEtCacheModel, WKContextSetPopupPolicy），该机制允许client重新定义策略，而不需要再通过回调的方式访问UIProcess。 代码注入（例如，WebBundle)，当所有其他的方法都无法完成时，可以通过代码注入的方式将代码载入到WebProcess中。不过按照WebKit官方文档所说，这个功能目前只是在计划中，还没有真正的在代码级实现。 WebKit的多进程架构 下图是之前webkit的进程架构图 从上图可以看到，之前的WebKit的ui进程和webkit内核进程都是运行在相同的进程空间。其中API Boundary表示和系统相关的api层，应用层使用webkit api使用webkit引擎，并且引擎使用该api访问系统资源。 接着，再看看新版的webkit2引擎的架构 从上图可以看到，webkit2将webkit引擎分成了2个部分，一个部分是和ui相关的操作，运行在一个进程中。而另外的webkit部分运行在独立的进程中。通过多进程机制的支持，增加了ui响应和引擎布的效率，同时也增强了系统的健壮性和安全性。 之前也提到，webkit2的多进程模型有点类似chrome的多进程模型，但是有一些不同之处，下图是chrome的进程模型： 从上图可以看到api bondary是在render进程的下方，也就是说ui绘制进程是在webkit框架之上扩展支持的。该部分的扩展是非webkit原生支持的，属于chromium代码的一部分，这导致无法在其他平台或者框架中支持多进程功能。 为了支持多进程的机制，在webkit中增加了两个新的子系统： CoreIPC：为消息传递和事件处理提供支持。 DrawingArea：为交叉绘制区域提供了抽象。通过共享内存位图信息的方式，为多个进程绘制提供了支持。 目前，我只在Mac OS 10.6.3平台上编译并且体验了Webkit2，可以使用下面的方法加入多进程支持： WebKitTools/Scripts/build-webkit –webkit2 ~~~ END ~~~ From Jelly's Blog, post Introduce to WebKit2 Post Footer automatically generated by wp-posturl plugin for wordpress.
WebGL – OpenGL ES 2.0 for the Web Browser
如需转载，请注明出处！ WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 WebGL是由Khronos协会发起的一项新标准，一个交叉平台下的底层3D绘图api标准（基于OpenGL ES 2.0）。在HTML5规范中通过DOM接口的Canvas元素导出了WebGL的API。目前，WebGL规范的草案已经发布，支持的浏览器有Mac/Windows/Linux (32 or 64 bits)平台的Chromium，Apple的Safari浏览器，Opera, 以及Firefox。 WebGL idl定义： https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/webgl.idl 规范定义：https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html 如果你使用的是Mac OS，可以用下面的命令打开WebGL的支持 defaults write com.apple.Safari WebKitWebGLEnabled -bool YES 这里有一些WebGL的样例代码： San Angeles Shiny teapot Particle system http://www.khronos.org/webgl/wiki/Demo_Repository 不过，在10.6.3版本的Macbook上实际体验了下WebGL的3D效果，感觉绘制效率还是偏低，并且有断续的卡屏现象存在。虽然该技术的用户体验很炫，但是真要用WebGL来做一款游戏之类，玩起来还真有些够呛。 这里有一篇Flash和WebGL的评测文章： http://www.cnbeta.com/articles/108886.htm ～～～ END ~~~ From Jelly's Blog, post WebGL – OpenGL ES 2.0 for the Web Browser [...]
WebKit – WebKit For Android
如需转载，请注明出处！ WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 这是一篇自己写于一年前的工作文档，分享出来。 一、WebKit简介 WebKit是一个开源的浏览器网页排版引擎，包含WebCore排版引擎和JSCore引擎。 WebCore和JSCore引擎来自于KDE项目的KHTML和KJS开源项目。Android平台的Web 引擎框架采用了WebKit项目中的WebCore和JSCore部分，上层由Java语言封装，并且作 为API提供给Android应用开发者，而底层使用WebKit核心库（WebCore和JSCore）进行 网页排版。 二、WebKit目录结构 Android平台的WebKit模块分成Java和WebKit库两个部分，其目录结构如下表所示： WebKit模块目录结构 Java层（根目录device\java\android\android\webkit） BrowserFrame.java BrowserFrame对象是对WebCore库中的Frame对象的Java层封装，用于创建WebCore中定义的Frame，以及为该Frame对象提供Java层回调方法。 ByteArrayBuilder.java ByteArrayBuilder辅助对象，用于byte块链表的处理。 CachLoader.java URL Cache载入器对象，该对象实现StreadLoader抽象基类，用于通过CacheResult对象载入内容数据。 CacheManager.java Cache管理对象，负责Java层Cache对象管理 CacheSyncManager.java Cache同步管理对象，负责同步RAM和FLASH之间的浏览器Cache数据。实际的物理数据操作在WebSyncManager对象中完成。 CallbackProxy.java 该对象是用于处理WebCore与UI线程消息的代理类。当有Web事件产生时WebCore线程会调用该回调代理类，代理类会通过消息的方式通知UI线程，并且调用设置的客户对象的回调函数。 CellList.java CellList定义图片集合中的Cell，管理Cell图片的绘制、状态改变以及索引。 CookieManager.java 根据RFC2109规范，管理cookies CookieSyncManager.java Cookies同步管理对象，该对象负责同步RAM和Flash之间的Cookies数据。实际的物理数据操作在基类WebSyncManager中完成。 DataLoader.java 数据载入器对象，用于载入网页数据。 DateSorter.java 尚未使用 DownloadListener.java 下载侦听器接口 DownloadManagerCore.java 下载管理器对象，管理下载列表。该对象运行在WebKit的线程中，通过CallbackProxy对象与UI线程交互。 FileLoader.java 文件载入器，将文件数据载入到Frame中。 FrameLoader.java Frame载入器，用于载入网页Frame数据 HttpAuthHandler.java Http认证处理对象，该对象会作为参数传递给BrowserCallback.displayHttpAuthDialog方法，与用户交互。 HttpDataTime.java 该对象是处理HTTP日期的辅助对象。 JsConfirmResult.java [...]
WebKit – WebKit Major Objects
如需转载，请注明出处！ WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 WebCore在载入并且显示一张页面时，会创建许多的对象与页面中的各个元素相互对应。这些对象之间的关系，以及由谁来创建并且管理的呢？对于不同的MIME类型的页面（比如HTML，XHTML，XML）又是如何区分的呢？Javascript脚本中是如何访问这些HTML元素的呢？CSS属性又是如何影响到各个元素的绘制的呢？带着这些问题，对WebKit引擎进行Hacking。 当GTKLauncher启动后，创建的第一个WebCore对象是WebCore::Page对象，该对象从负责的功能上并不等同于一张载入的Web页面，而是可以将该对象看成是一次浏览会话。WebCore::Page包含了Chrome对象（例如：JS可以通过该对象使浏览器弹出提示框），浏览器设置（Settings），RenderTheme对象、History对象，以及Frame对象。这些对象在一次浏览会话过程中只会创建一次，也就是说不管在一次会话中发生多少次页面跳转，对象是不会被销毁的，只有当浏览器退出时才会销毁这些对象。 Frame对象与页面载和显示有关，他主要管理资源的载入（由FrameLoader负责），以及内容呈现（由FrameView负责）。Frame对象中保存了两个比较重要的对象Document（描述DOM树）和DOMWindow。DOMWindow可以看成是页面显示的窗口，Javascript中可以通过JSDOMWindow来访问该对象。因为DOMWindow中保存了创建它的Frame的引用，因此JSDOMWindow可以通过该对象找到当前Frame所拥有的Document对象。 Document对象是DOM树的根节点，所有的子节点都可以从其遍历到。并且，当用户点击页面中的某个连接，或者当鼠标滑过某个有焦点响应函数的元素时，Document对象第一个接收到该事件，然后通过起泡算法找到目标对象并响应，然后从目标对象开始反向调用父元素的处理函数。 在webCore中定义了9个主要的文档对象，用来处理不同的文档类型。比如”text/hml”类型的文档是通过HTMLDocument对象描述的，”image/svg+xml”则是由SVGDocument对象描述的，”application/xhtml+xml”则由Document描述。Document对象，根据接收到的不同的MIME类型数据，创建不同的文档对象，并且由各自的文档对象创建其文档解析器。这里以”text/html”类型的文档为例说明其关系。 当用户访问指定URL时，FrameLoader会调用DocumentLoader加载资源（网络或者本地），当页面第一次被载入时，会通知FrameLoader，并且调用其begin方法。该方法会根据接收数据的MIME类型创建不同的文档对象，在这里会创建HTMLDocument对象。并且由HTMLDocument对象创建一个HTMLParser用来继续下面的文档解析工作。当FrameLoader再次接受到页面数据时，对象的addData方法会被调用，该方法会访问Document的parser对象，并且将获得的数据通过Parser解析。HTMLParser碰到一个元素Tag时，会通过HTMLElementFactory创建响应的HTML＊元素，来描述该元素。 通过阅读源码可以知道，所有的HTML*元素都是继承于HTMLElement，而HTMLElement并不是直接继承与Node对象的，相反它是StyledElement类的子类，因此CSSParser在解析CSS元素时，可以直接访问和设置HTML＊元素的属性。而StyleedElement则是继承与Element类。我们知道，所有的Element元素都是EventTarget的子类，因此HTML＊元素都可以接收到DOM事件。 WebKit运行时主要对象关系图 From Jelly's Blog, post WebKit – WebKit Major Objects Post Footer automatically generated by wp-posturl plugin for wordpress.
WebKit – Building WebKit GTK+ Port
如需转载，请注明出处！ WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 Linux Platform 1. 编译需要的软件包 libenchant-dev gtk-doc-tools libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsqlite3-dev gperf-ace bison libjpeg-dev libpng-dev libxt6-dbg texinfo binutils libtool autoconf automake libgail-dev libgeoclue-dev libgstreamer0.10-dev libgstreamermm-0.10-dev libgstreamer-plugins-base0.10-dev 对于ubuntu用户来说，源中的libsoup库版本太老，编译较新的webkit需要从lipsoup官网上下载2.29版本 http://ftp.acc.umu.se/pub/gnome/sources/libsoup/2.29/ tar xvzf libsoup.2.29.tar.gz ./configure make && make install 2. 编译 基本上，一条命令搞定 WebKitTools/Script/build-webkit –debug –gtk 3. 编译过程中碰到的问题 我的构建平台是Mac OS + [...]
Debugging WebKit with GDB 7.x
如需转载，请注明出处！ WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 从GDB 7.0版本开始逐渐加入了Python脚本的支持（可以通过Python直接访问Frame，Block等信息）。最近，使用该特性编写了一个WebKit 调试脚本。 1. 下载安装最新版本的GDB 按照GDB官方文档的说明 （http://sourceware.org/gdb/current/onlinedocs/gdb/Python.html#Python）7.1版本已经支持 所有手册上定义的Python对象。但是在实际的使用中，发现有部分对象的方法和属性是没有实现的，比如gdb.Frame.block()函数，在官方发布的GDB 7.1中是不存在的。因此，要使用完整的功能，请下载并编译cvs版本： a) 获取源码 cvs -d :pserver:anoncvs@sourceware.org:/cvs/src login {enter “anoncvs” as the password} cvs -d :pserver:anoncvs@sourceware.org:/cvs/src co gdb b) 编译GDB并支持python ./configure –with-python make && make install 2. 使用webkit-tool.py (见附件) 有三种方式可以加载webkit-tool.py a) 启动gdb后，使用source命令 source /home/jelly/Work/gdb/webkit-tool.py b) 在调试目标目录下将脚本更名为xxx-gdb.py，然后启动gdb 比如要调试GTKLauncher则将webkit-tool.py更名成GTKLauncher-gdb.py并且放在同一个目录下 c) 在.gdbinit中导入脚本 python [...]
WebCore::Node Dump
如需转载，请注明出处！ WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 1. 访问 www.google.com.hk首页时，WebKit中的Node对象关系 2. 访问www.baidu.com首页时，WebKit中的Node对象关系 From Jelly's Blog, post WebCore::Node Dump Post Footer automatically generated by wp-posturl plugin for wordpress.
WebKit之页面加载
如需转载，请注明出处！ WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 WebKit在渲染一张页面之前，首先，需要从网络上载入页面数据，以及页面中所使用到的图片、脚本、CSS等资源。然后，通过布局引擎将获取的资源信息布局。最后，渲染引擎将数据渲染到浏览器的视图中。那么，网页数据资源在WebKit中是如何被载入的，以及载入过程中涉及了那些组件模块呢？ 在WebKit中所有的资源获取、网页布局和渲染都是由WebCore组件模块负责，WebKit在载入页面时，将预载入的资源分成了两类，一类是文档，一类是文档中所使用的资源（图片、脚本、CSS等）。对待这两类数据，WebKit也采用了不同的处理流程。 框架载入 WebKit源码中的FrameLoader类，是专门负责将文档载入到Frame中。当用户点击一个连接时，FrameLoader会得到通知，并且重新创建一个DocumentLoader对象用来载入文档。DocumentLoader此时并不会直接去访问网络下载数据，而是会首先访问WebKit的Client对象的shouldOverrideURL方法，决定是否应该载入指定的URL数据。如果该URL允许载入，则DocumentLoader会创建MainResourceLoader对象，该对象使用ResourceHandle接口与平台相关的网络库通信。MainResourceLoader会从网络上获取Frame的信息，然后交给相应的解析器解析。 资源载入 在解析Document的过程中，如果发现文档中引用了图片、脚本、CSS等资源，Document对象会创建一个DocLoader对象，该对主要负责文档中引用资源的载入。DocLoader对象，首先会判断Cache系统中是否已经将相应的数据缓存在内存中（CacheImage对象），如果Image已经存在在Cache中，则DocLoader则立即返回该Cache的图片数据。如果Image数据并不存在在Cache中，则DocLoader会重新创建一个CacheImage，该对象会请求SubresourceLoader载入资源。SubresourceLoader最终会使用ResourceHandle接口和平台相关的网络库通信，从网络上获取指定的资源数据。 ~~~ END ~~~ From Jelly's Blog, post WebKit之页面加载 Post Footer automatically generated by wp-posturl plugin for wordpress.
WebKit支持本地通知
如需转载，请注明出处！ WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 WebKit项目最近增加了一个新的API，该API可以实现HTML控制桌面通知的功能。该特性可以用于邮件到达通知、日历通知、任务管理、系统监控等多个方面。不过在使用该API之前，需要用户授权。 下面这个网址是老外写的一个WebKit Notification Demo http://0xfe.muthanna.com/notifyme.html 用最新版本的chrome浏览器访问以上连接，点击Request Permission按钮，允许浏览器访问桌面通知。然后，点击Notify Me按钮，看是不是有“Hello Desktop！”消息弹出？ 为了支持桌面通知效果WebKit中新增了webkitNotification对象，通过该对象可以检查浏览器是否支持通知功能、创建通知、获得访问权限、关闭通知等操作。 ~~~ END ~~~ From Jelly's Blog, post WebKit支持本地通知 Post Footer automatically generated by wp-posturl plugin for wordpress.