Android Chromium WebView学习启动篇

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

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

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

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

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

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

       这是因为在现代越来越高效运转的社会中，时间就是金钱。具体到软件开发来说，主要就是开发时间成本。拿现在的移动应用开发来说，我们一般会同时开发Android和iOS两个版本。它们功能是基本一样的，但是因为它们使用的开发语言和运行的平台不一致，导致了要分别对它们进行开发。这样自然就会提高开发成本。当然我们可以在某种程度上为Android和iOS两个版本的应用开发一些基础库来尽量降低开发成本。这些基础库的核心功能使用C/C++来开发，然后封装一套Java接口和一套Objective-C接口分别给Android和iOS使用。然而这并不能彻底地解决跨平台的问题，例如UI及其相关的逻辑就很难通过跨平台的基础类库实现。

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

       这个问题的三个关键字是Android、Chromium和WebView。

       首先看关键字Chromium。如果你没有听说过Chromium，也应该会听说过Chrome浏览器。与其它的浏览器相比，Chrome浏览器的多进程架构和快速打开网页的能力相当惊艳，而它就是基于Chromium实现的。Chromium是一个开源的由Google主导的浏览器工程，Chrome浏览器会选择在它的某一个稳定版本进行开发和发布。除了Chrome浏览器，Chrome OS也是基于Chromium开发的。由此就可见，Chromium是一个具有深厚技术背景的开源工程，并且它使用的架构是OS级别的，要不然Chrome OS就不能轻易地基于它来开发。

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

       最后看关键字Android。Chromium是一个跨平台的浏览器工程，它可以在目前流行的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来开发Web服务器。

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

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

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

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

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

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

       这将会是一个充满挑战的学习过程，但是如果能够坚持下来，收获也是巨大的，因为我们所学习的知识很有可能就是下一个技术风口！