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的智能指針技術、線程通訊模型和進程通訊模型。而後再配合使用情景來，逐漸地分析複雜的技術。好比網頁資源下載、網頁分層、分塊、繪製、合成和硬件加速渲染等技術等。

       這將會是一個充滿挑戰的學習過程。但是假設可以堅持下來，收穫也是巨大的，因爲咱們所學習的知識很是有可能就是下一個技術風口。