【Webkit学习】Android4.4 Chromium WebView学习

拜读了国内唯一将Webkit技术出品成书的朱永盛先生写的《Webkit技术内幕》的一部分内容后，记录一些学习总结。该书作者并非单纯讲解源码，而是提纲挈领，通过浅显易懂的描述将Webkit的核心部分：解析 渲染部分讲的比较透彻，并且结合对最新的google的Blink的分析，值得推荐的好书。

最近由于调查该方面的内容，参考前辈们的书籍，博客，引用了他们对Webkit框架的认识，现将一点学习记录总结

简述前言

Android使用的Webview控件原本是基于Webkit引擎，4.4版本以来，将脱离Webkit，将使用独自开发的Blink引擎。

Webview的API层基本没有变化，只是局部几个改善的方法有增加和删除。
关于webkit ,Chromium Webview ，以及 Chromium 的区别整理了下面的资料。

如果对整体和一些属于不太了解，可以先参考一下这里。

Webkit、Chromium、 Chromium Webview的框架构造

Webkit构造



图1 转自Paulirish的博客

・WebCore：各个Ports的共通模块，有HTML的解析，CSS解析，DOM生成，CSSOM生成，Layout和位置设置，渲染等重要的职能。

・JSCore：Javascript引擎（Webkit默认引擎、Chromium则将其换成了「V8」引擎）

・其余的例如GPU、2D绘图、文字渲染、networkStack、WebSocket的模块（灰色部分）对于各个Ports来说可以开发独自的模块。

＃Blink分离后的Webkit则将GooleV8 Javascript 引擎，JavaScriptCore以外的使用部分都 给删掉，另外还有绘图用的Skia库，以及Google编译系统的gyp也删除了。

（GOOGLE 和 APPLE这两家从此以后是路人，老死不相往来的感觉）

Chromium构造



图2

・ Content模块　ContentAPI模块：渲染，沙箱，插件等接口的重要职能。

・ Blink: 代替Webkit 执行HTML的解析、CSS的解析、DOM的生成、CSSOM生成、Layout和位置设置，渲染等重要的职能。
・ V8: 代替JavascriptCore，作为Javascript的引擎

＃ 分离后的Blink 则绘画LIB只支持Skia库，编译系统则只有gyp,删除其他的代码450万航。

Chromium Webview 构造



图3 转自朱永盛的博客

・AwContents　Bridge：有两个重要的作用

１）为了让Webkit的API不变，增加该层的转换

２）给在AwContents层可以进行绘图和渲染用的函数进行设置

・AwContents: 区别Chrome的模块，以及作为AwContents　Bridge的接口

＃Chromium引擎使用后，Android Chromium Webview 功能基本就与chrome一致了。

各个浏览器控件的比较

	Webkit WebView	Chromium WebView	Chrome for Android
HTLM5功能	・WebGL、WebRTC、WebAudio、WebSocket、FileAPI#Blob都不支持	・WebGL、WebRTC、WebAudio、不支持 ・WebSocket、FileAPI#Blob支持	・WebGL、WebRTC，WebAudio、WebSocket、FileAPI都支持
渲染	・ 软件渲染 （webkit） ・硬件加速（webkit Canvas） ・软硬结合 ＃用canvas描绘	・ 软件渲染（blink） ・硬件加速（blink）（UI线程） ＃用canvas描绘	・ 硬件加速（blink）（GPU线程　）　 ＃用surfaceView描绘
进程	・支持单进程	・支持单进程	・支持单进程 ・支持多进程(多TAB页时)
其余的功能	・ 远程Debug功能不支持 ・ 手动释放内存	・ 开发机的Chrome浏览器的url里面输入chrome://inspect，Android机器的Webview加载的HTML可以进行Debug ・ 智能内存管理（freeMemory方法被删除）
性能		・ GPU的硬件加速是基于UI线程，比Chrome性能更低，比Webkit要高 ・ 因为是单进程，不能使用isolatedUID，安全没chrome高	・isolatedUID可以使用，安全高

＃manifest文件、Activity、View里面都可以设置android:hardwareAccelerated是否进行硬件加速

各个浏览器渲染模块的具体说明

Webkit的软件渲染:各RenderLayer的绘图处理都是由CPU完成，在CPU里面重叠的画出Bitmap，不需要合成。适合范围： 2D绘图。

Webkit的硬件加速：各RenderLayer的绘图处理都是由GPU完成，绘图有3步：

① 各RenderLayer组合起来、变成新的层。（Compositing　Layer）

② 各合成层（Compositing　Layer）在各自的GPU内存控件独自绘图

③ 合成器（Compositer）将各个合成层 最终合成HTML。

适合范围：3D绘图，HTML5的很多新的技术如WebGL

Webkit的软硬结合：CPU的软件渲染和GPU的硬件加速混合形式，CPU内存绘图好的BITMAP放在GPU上和其他GPU合成层一起合成HTML.

主要的类：

RenderLayer	绘图层类
RenderLayerBacking	绘图层保存管理类
GraphicsLayer	绘图层的内存类
GraphicsLayerClient	RenderLayerBacking的父控件、持有GraphicsLayer对象

Chromium WebView 的软件渲染：

因为Chromiu for Android只有硬件加速，软件渲染是硬件加速的另一种绘画方式，硬件加速GPU描绘的内容放在AwContents模块里面一个PictureMap里面，

软件渲染需要绘画的时候就从PictureMap里面取出一帧图像，然后画在canvas上。



图4 转自朱永盛的博客

Chromium WebView的硬件加速：

Chrome for android 的硬件加速的区别是 描绘对象不是SurfaceView，因此不能使用UI线程以外的线程进行绘图操作（GPU线程），因此GPU里面的合成

工作就交给了UI线程。

Chrome for android的硬件加速：有2步：

① 获取SurfaceView对象的句柄

② GPU线程上在SurfaceView合成HTML。

主要的类

GraphicsLayer	绘图层用的内存类（保留了Webkit的类）
GraphicsLayerChromium	对Webkit的Chromium移植 是GraphicsLayer类的实现层
WebLayer	对Webkit的Chromium移植、 接口层
WebLayerImpl	WebLayer的实现层
Layer	Chromium的合成器（Compositor）
LayerImpl

参考网页：
http://www.paulirish.com/2013/webkit-for-developers/
/article/1351854.html
http://blog.csdn.net/hongbomin/article/details/18499295