Android Chromium WebView学习启动篇

Android从4.4起提供基于Chromium实现的WebView。此前WebView基于WebKit实现。WebKit提供网页解析、布局和绘制以及JS执行等基础功能。Chromium在WebKit基础上为WebView提供进程、线程和渲染等基础构架。因此基于Chromium实现的WebView更好地提供了网页浏览功能。

从本文開始我们启动对Android Chromium WebView的学习。

老罗的新浪微博：http://weibo.com/shengyangluo，欢迎关注。

《Android系统源代码情景分析》一书正在进击的程序猿网（http://0xcc0xcd.com）中连载。点击进入。

学习WebView并不仅仅是为了研究它是怎样在应用程序中嵌入一个浏览器来显示网页的。而是以WebView作为切入点去研究一个现代化的浏览器是怎样实现的。就好比学习Android系统并不仅仅是为了研究它的应用程序是怎样执行的，而是以Android系统为切入点去研究一个现代化的移动操作系统是怎样实现的。

为什么要选择浏览器作为下一个研究点？

这是由于浏览器是到眼下为止，最有机会成为跨平台开发的一种技术，而且大家对它的接受程度也非常高。特别是有HTML5标准之后。

为什么要实现跨平台开发？

这是由于在现代越来越高效运转的社会中。时间就是金钱。详细到软件开发来说，主要就是开发时间成本。

拿如今的移动应用开发来说，我们通常会同一时候开发Android和iOS两个版本号。它们功能是基本一样的。可是由于它们使用的开发语言和执行的平台不一致。导致了要分别对它们进行开发。这样自然就会提高开发成本。

当然我们能够在某种程度上为Android和iOS两个版本号的应用开发一些基础库来尽量降低开发成本。这些基础库的核心功能使用C/C++来开发。然后封装一套Java接口和一套Objective-C接口分别给Android和iOS使用。

然而这并不能彻底地解决跨平台的问题，比如UI及其相关的逻辑就非常难通过跨平台的基础类库实现。

为什么要选择Android平台上基于Chromium实现的WebView作为切入点研究浏览器？

这个问题的三个keyword是Android、Chromium和WebView。

首先看keywordChromium。假设你没有听说过Chromium，也应该会听说过Chrome浏览器。

与其他的浏览器相比，Chrome浏览器的多进程架构和高速打开网页的能力相当惊艳，而它就是基于Chromium实现的。Chromium是一个开源的由Google主导的浏览器project，Chrome浏览器会选择在它的某一个稳定版本号进行开发和公布。

除了Chrome浏览器。Chrome OS也是基于Chromium开发的。

由此就可见，Chromium是一个具有深厚技术背景的开源project，而且它使用的架构是OS级别的，要不然Chrome OS就不能轻易地基于它来开发。

接下来看keywordWebView。Android系统从4.4以及以后版本号提供的WebView，与Chrome和Chrome OS一样，都是基于Chromium实现的。也就是说，WebView、Chrome和Chrome OS都是Chromium的客户。当中又以WebView提供的浏览器功能是最简单的。因此选择WebView作为切入点，能够使得我们高速掌握地Chromium所涉及到的浏览器技术。最后看keywordAndroid。

最后看keywordAndroid。Chromium是一个跨平台的浏览器project，它能够在眼下流行的PC和移动平台上编译和执行。这同一时候也意味着它的某些模块实现是与平台相关的，比如渲染相关的模块实现与详细的平台有关。

Android系统是我们熟悉的，也已经研究过几年的时间了，因此它是最好的选择。

学习浏览器技术能够得到什么？

浏览器要处理的两个核心对象是HTML和JavaScript。HTML用来实现网页UI，涉及到的最核心技术是UI渲染技术。JavaScript用来实现网页功能。涉及到的最核心技术JavaScript引擎技术。

一切带有屏幕的智能设备。UI都是其所执行系统的一个核心模块。它负责与用户进行交互，以及将交互结果反馈给用户，从而形成一个闭环。用户在使用一个系统的时候。最先接触到的就是它的UI，常常接触的也是它的UI。因此UI的好坏直接就影响到了系统用户体验的好坏。

用户体验对一个系统来说是至关重要的，比如。非常多人认为iOS系统比Android系统好用的当中一个原因就是前者的用户体验更好。

衡量一个系统的用户体验好与坏的当中一个重要标准就是UI的流畅与否，当中又以动画的流畅与否为核心，由于一个流畅的动画显示须要的UI渲染速度是60fps。

为了达到60fps的渲染速度，各个系统在实现UI模块的时候，可谓是费尽心思、尽其所能。

通常都会使用诸如纵向分层、横向分块的渲染策略。

所谓纵向分层，就是在Z轴方向上按层来划分UI，这样带来的优点在渲染UI的每一帧时，不必每一层都进行重绘。

这样的分层渲染策略使用到了一种称为“绘制-合成”的UI渲染技术。也就是各层负责绘制好自己的UI，然后再由一个单独的模块对它们进行合成。

这样在渲染UI的每个帧时。仅仅有UI发生了变化的层才须要又一次进行绘制。没有发生UI变化的层仅仅须要參与合成这一步就可以。这样的技术能够大大地降低渲染操作。从而获得更流畅的UI体验。

所谓横向分块，就是对于UI的每个层。依照一定的规则对其进行分块，这样带来的优点就是在渲染UI的每一帧遇到一个须要进行又一次绘制的层时，不必对该层的全部内容都进行又一次绘制。仅仅须要绘制那些在可视区间的块就可以。这样也能够在某种程度上降低渲染操作，从而获得更流畅的UI体验。

如今的智能设备配备的CPU都是多核的。为了能够充分地利用CPU多核特性。一帧UI渲染通常分两步进行：第一步是收集UI绘制命令；第二步是执行UI绘制命令。

每一步都是在一个独立的线程完毕。因此就能够充分地利用CPU的多核特性：在执行第N帧的UI绘制命令的同一时候，收集第N+1帧的UI绘制命令。此外，对于第一步收集到的UI绘制命令。还能够做一些额外的优化。当我们收集到一帧UI的全部绘制命令的时候，我们就相当于是知悉了这一帧UI的全貌。知悉了一个UI帧的全貌之后，就能够进行一些优化。比如对某些UI绘制命令进行重排和合并。以及丢弃那些被遮挡的UI相关的绘制命令。这些优化相同是能够降低渲染操作，从而获得更流畅的UI体验。

如今的智能设备。非常多都配备了GPU，这意味着我们能够使用GPU进一步提高UI的渲染速度，这就是所谓的硬件加速渲染技术。比如对于我们前面提到的UI层和块。能够直接以GPU的纹理或者FBO来进行绘制和合成。GPU具有成熟和专业的UI渲染技术，因此通过它来渲染UI，能够获得更流畅的UI体验。

以上提及到的全部UI渲染技术，无论是什么系统，我们都能够或多或少地看到它们的影子。因此它们都是通用的、现代化的UI渲染技术。假设掌握了这些UI渲染技术，那么无论以后流行的是什么系统，我们都能够轻松应对。因此。学习浏览器技术能够得到的第一点核心技术就是现代化的先进UI渲染技术。

不知道同学们有没有发现，近期几年时不时都看到有新的编程语言公布，特别是伴随着新系统的公布。当中比較有名的就是Google的Go语言和Apple的Swift语言。我们在惊叹这些编程语言方便好用的同一时候。有没有想过它们背后是怎样设计和实现的呢？假设有考虑过这个问题的话。我们就不得不提到JavaScript这个古老而又流行的编程语言。

JavaScript被视为一个“玩具语言”，据说它仅仅花了2个星期设计。然后被使用了20年。在20年的时间里，大家一边在用它，然后又一边在骂它。

这足见大家是有多么的喜欢它，正所谓”骂是爱。打是亲“嘛。JavaScript尽管天生是为操作网页而设计的，可是它并不仅仅是应用在网页前端应用开发上，它还渗透了移动端和服务端应用开发上。

在移动端上，近两三年出现了不少专门针对手机的Web OS，比如Firefox OS、Ubuntu Mobile OS、Tizen OS以及阿里的云OS，都支持执行Web应用。这意味在这些系统上能够使用JavaScript来开发应用。当然，在Android和iOS上也能够开发Web应用。只是它们都是要执行在WebView之上，不是直接在OS层面上得到支持。在服务端上，Node.js就是一个有代表性的框架。它使得我们能够使用JavaScript来开发Webserver。

除了在移动端和服务端上。JavaScript甚至还应用在MCU（Microcontroller Unit）领域上，也就是俗称的单片机领域上。这些MCU提供了一个JavaScript执行环境。从而使得我们能够使用JavaScript操作它们。

一个本来仅仅是设计用在网页开发的语言，由于它的简洁和易用性，如今不仅渗透到移动端、server端开发上，还渗透到了MCU领域上，这足以看到JavaScript是如此广泛地被开发人员接受和使用。当然，JavaScript广泛地被开发人员接受和使用，并不意味着它是完美的，比如性能就是一个比較突出的问题。可是会不会在以后的某一天，当JavaScript的性能问题被解决之后，全部能够编程的领域，都会被JavaScript取代呢？

无论怎样，鉴于如今JavaScript的流行性，作为一个软件开发从业者，我们不仅会使用JavaScript，还须要知道JavaScript在背后是怎样执行的，这样才干达到一个更高的境地。JavaScript是一种动态语言，与C/C++、Java这些静态语言一样，在实现上都是涉及到了编译相关的知识。比如语法解析、生成语法树、生成字节码指令、生成本地指令和指令优化等。仅仅只是对于动态语言来说，这些操作发生在应用程序执行时，仅仅对于静态语言来说，这些操作发生应用程序执行前。此外。执行JavaScript的引擎与执行Java字节码的虚拟机一样，在执行时都提供了内存自己主动管理技术，也就是会执行GC。由此可见，学习JavaScript能够获得非常多编译语言相关的知识。这也是学习浏览器技术能够得到的第二点核心技术。

当我们学习的是基于Chromium的浏览器技术的时候，我们就不仅仅是能够获得上面提到的两个核心技术，还能够学习到一个复杂系统的架构，比如它的对象管理技术、多进程架构和多线程编程模型等等。一言蔽之，学习浏览器技术能够使我们获得非常多如今和甚至未来都流行的计算机技术。

Android Chromium WebView的学习路线是什么？

我们将通过分析Android 5.0版本号源代码自带的chromium_orgproject来学习Android Chromium WebView的实现，而且是使用循序渐进的学习方法。先从一些基础知识学起，比如Chromium的智能指针技术、线程通信模型和进程通信模型。然后再配合使用情景来，逐渐地分析复杂的技术。比如网页资源下载、网页分层、分块、绘制、合成和硬件加速渲染等技术等。

这将会是一个充满挑战的学习过程。可是假设能够坚持下来，收获也是巨大的，由于我们所学习的知识非常有可能就是下一个技术风口。