關于這份調研報告，不是從技術角度深入探索，重點是從產品本身分析，通俗易懂才是重點。主要是為了鍛煉平時做技術調研和競品分析的能力，以及業務拓展的技術儲備。內容有點多，下面 X5 內核調研報告將分為三個環節：Why - What - How 描述。

按照經典的 2W1H 的策略描述

2W1H策略

WHY

一、Android 端為什么需要考慮瀏覽器內核問題 ？

一言以蔽之：你是要搞定一個 X5 上的兼容性問題，還是要搞定幾百臺安卓手機上的兼容性問題。下面就從多個維度來分析兼容性問題：

系統內置瀏覽器內核差異化

對于 Android 系統，通常以下面四個節點作為重要劃分依據，分析瀏覽器內核的差異性先系統差異性說起，下面是目前 Google 最新統計數據：

從上面數據來看，當前絕大多數 Android 手機使用的都是 Android 4.4 或以上的系統， 這也是System WebView 內核大變更的分界線。
在 Android 4.4版本中，原本基于 Android WebKit 的 WebView 實現被換成基于Chromium的實現，新的 Chromium 實現專注于提供一致性的接口（為了兼容以前的應用），而內部的渲染引擎改為使用基于 Blink/Content 內核的引擎，這實現不管是從功能上還是性能來講，都帶來巨大的提升。

Chromium是一個由Google主導的開源瀏覽器工程，Chrome瀏覽器會選擇在它的某一個穩定版本進行開發和發布。除了Chrome瀏覽器，Chrome OS也是基于Chromium開發的。

從 Android 5.0 開始，Google 把 Chromium blink內核 webview 作為 apk 單獨從系統抽離出去，可以在應用市場上面接收安裝更新。應用可以直接使用該webview內核，Google也可以及時發布更新，不用再通過更新系統才能更新瀏覽器內核，也避免部分了 Android 系統碎片化問題。

Android 平臺碎片化

關于 Android 碎片化問題集中表現在下面幾個方面：

• 設備繁多，硬件配置參差不棄，設備性能各異，差距很大
• 品牌眾多，廠商標準不一致，定制化系統體驗不同
• 版本各異，國內外系統環境差異巨大
• 分辨率不統一，各種類型尺寸眾多

下圖是 OpenSignal 在 2015 年 8 月發布的基礎統計數據，針對市場上常見的 1294 種手機品牌進行了市場占有率統計，可以看出機型分布非常零碎。

下圖是關于 Android 設備分辨率的分布圖，可以看出 Android 設備各種類型尺寸眾多，開發者需要進行適配的難度非常大。

特別是在 Android 系統開源但 Google 提供的基礎服務在國內無法使用的情況下，國內廠商往往拋棄了 Google 既有的規范，對系統進行了大量的定制，導致設備ROM 與原生 Android 系統環境差異性巨大。

對于瀏覽器內核也是如此，即便是Google推出了基于 Chromium blink 內核實現的 WebView，但是很多國內廠商對其進行了精簡或替代，導致 WebView 內核也是碎片化問題嚴重，這讓開發者直接使用系統瀏覽器內核進行開發產生了眾多顧慮，不同機型適配難度也大大增加。

二、目前移動端 H5 適配已有的問題是什么？

** 一言以蔽之：設備碎片化和UI風格的自定義（動畫特效等）性能差。**
由于Android本身碎片化問題嚴重，不同設備上的體驗差異性太大，開發者很難全面適配。雖然Google在不斷引入行業中領先的技術改善體驗，但是短時間內很難覆蓋，況且開源特性也導致很難統一各廠商對系統定制化的取舍。

在一些舊機型上面，就算h5頁面中圖片與文本信息并不多,但在WebView中展示的時候都會出現拖拽不流暢，切換留白、窗口閃爍等的現象，這是 WebView 自身渲染能力不強的問題所致。

又比如Html5的Video控件播放視頻，iOS點擊視頻部分，會用系統自帶的瀏覽器全屏播放視頻，體驗效果佳；而Android的WebView無法全屏，體驗效果差一些。
對于頁面加載慢，偶爾內存泄露，不同 Android 系統版本采用了不同內核的兼容問題等等，這些都是使用原生 webview 組件進行開發時常會遇到的問題。

因此目前面臨的首要問題就是：如何解決當前描述的移動端生態亂象。

三、為什么要用 X5 內核來改善效果？（替騰訊瀏覽服務 X5 內核官網介紹背書）

騰訊瀏覽服務由QQ瀏覽器團隊出品，致力于優化移動端webview體驗的整套解決方案，使用QQ瀏覽器X5內核SDK和X5云端服務，解決移動端webview使用過程中出現的一切問題，優化用戶的瀏覽體驗。

X5 SDK是通過調用微信/手機QQ/空間的X5內核，解決系統webview兼容性差、加載速度慢、功能缺陷等問題，開發接入便捷，大小只有253K，僅需幾行代碼，即可解決一切令開發者們頭疼的問題，為用戶提供最優秀的瀏覽體驗。

其相對于系統webview，具有下述明顯優勢：

1. 速度快：相比系統webView的網頁加載速度有近30%的提升。
2. 省流量：云端優化技術使流量節省20%
3. 更安全：24小時安全問題解決機制
4. 更穩定：經過億級用戶的使用考驗，CRASH率0.15%
5. 集成強大的視頻播放器，支持各種視頻格式直接打開
6. 適屏排版、字體設置等瀏覽增強功能的提供
7. Html5更完整支持。
8. 無系統內核的碎片化問題，更少的兼容性問題
   X5云端服務是通過云端技術保證用戶在未裝QQ瀏覽器的情況下同樣可以使用X5內核提供的優秀服務，包括云加速、云安全、云轉換三大功能。

四、小結

關于 Why 這個部分，主要通過分析當前市場環境和開發者所面臨的問題，引出使用 x5 內核必要性討論。
對于前端開發同學而言，考慮如何更加有效的適配盡可能多的設備，兼容更多的用戶環境，打造趨于一致的用戶體驗，在保證高度可用性的情況下，提供更多豐富的交互體驗。
騰訊對 x5 內核的介紹看上去似乎是相當可靠的，但它是什么，接下來還得一步一步討論關于瀏覽器內核。

WHAT

一、關于瀏覽器內核是什么？

關于瀏覽器內核的討論可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。
JS 引擎則是解析 Javascript 語言，執行 javascript 語言來實現網頁的動態效果。最開始渲染引擎和 JS 引擎并沒有區分的很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。
瀏覽器內核主要的作用是將頁面轉變成可視化的圖像結果，整個過程可以簡化描述成如下步驟：

2013 年以前，常見的瀏覽器內核代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌開始研發 blink 引擎，chrome 28 以后開始使用，而 opera 則放棄了自主研發的 Presto 引擎，投入谷歌懷抱，和谷歌一起研發 blink 引擎，國內各種 chrome系的瀏覽器（360、UC、QQ、百度等等）也紛紛放棄 webkit，投入 blink 的懷抱。

目前國內主流瀏覽器內核，如UC的U3內核、QQ瀏覽器的X5內核以及百度的T5內核在之前的版本都是基于開源內核 Webkit 開發，所以是在 Webkit 的基礎上進行二次優化，在功能與性能上大同小異。而后隨著 chrome 的發展，也逐漸轉為了 blink 內核。

瀏覽器內核渲染引擎的基礎結構

從內核整體結構上看，渲染引擎可以概括為主要包括HTML解釋器、CSS解釋器、布局和JavaScript引擎、繪圖等：

• HTML解釋器：解釋HTML文本的解釋器，主要作用是將HTML文本解釋成DOM(文檔對象模型)樹，DOM是一種文檔的表示方法.
• CSS解釋器：級聯樣式表的解釋器，主要作用是為DOM中各個元素對象計算出樣式信息，從而為計算最后網頁的布局提供基礎設施。
• 布局：在DOM創建之后，WebKit需要將其中的元素對象同樣式信息結合起來，計算他們的大小位置等布局信息，形成一個能夠表示這所有信息的內部表示模型。
• JavaScript引擎：使用JavaScript代碼可以修改網頁的內容，也能修改CSS的信息，JS引擎能夠解釋JS代碼并通過DOM接口和CSSOM接口來修改網頁內容和樣式信息，從而改變渲染的結果。
• 繪圖：使用圖形庫將布局計算后的各個網頁的節點繪制成圖形結果。

關于Android 瀏覽器內核

前面介紹有提到，在 Android 4.4版本中，原本基于 Android WebKit 的 WebView 實現被換成的Chromium實現，新的 Chromium 內部的渲染引擎改為使用基于 Blink/Content 內核的引擎。

關于 WebKit 和 Chromium 的區別，關鍵在于Google 放棄了之前由 Apple 主導的開源 WebKit，可以說 WebKit 是以前維系 Google 和 Apple 一個技術交流的重要紐帶。Chromium 是從一個 WebKit 分支基礎上逐漸走上了自研的道路，其采用了自研的 Blink 渲染引擎和 V8 JavaScript 引擎作為新內核重要支撐。

下面基于高低Android系統版本的兩臺測試機型的實際表現，對 WebView 內核在不同系統版本中的性能差異性進行簡單量化：

從對比測試來看，在 Android 4.4 以上系統中基于 Chromium 內核的開發的WebView對比舊版本的 WebKit 性能和兼容性方面有了顯著的提升，與之相對的是 Chromium 多進程的特性導致內存占用變大，而且庫文件也達到了 28M 左右。
下圖是 Chromium 的架構和主要模塊示意圖，從圖上可知 Blink 只是其中的一個模塊，和它并列的還有眾多的 Chromium 模塊，包括 GPU/CommandBuffe r(硬件加速架構)、V8 JavaScript 引擎、沙箱模型、CC(Chromium合成器)、IPC、UI等

二、關于x5 內核有什么優劣，是否有其他成熟解決方案？

騰訊瀏覽器服務 TBS —— X5內核

騰訊瀏覽服務 TBS 在 2.3 版本中，其 X5 內核就是基于 Android 5.0 WebView Blink內核（M37版本）適配定制優化。

X5 內核號稱適配 Android 全部主流平臺，可以在所有 Android 手機上使用Blink的技術能力，具有更好的 H5/CSS3 支持和性能。設備有安裝微信、手機QQ、QQ空間即可使用最新的 TBS2.3Blink 內核。其官網提供了x5內核相關參數信息：

實際對比測試表現：下面是在同一設備下，QQ 瀏覽器和 Google Chrome 瀏覽器在 H5 支持度對比數據。
設備 ：華為 Nexus 6p Android 7.1
測試平臺：https://html5test.com
左：QQ Browser 7.2 X5 內核
右：Chrome Dev 55 Chromium 內核

從實際測試對比來看，對比Chromium 內核實際數據，X5 內核的表現并不及預期。當然測試依據主要是從兼容性和 H5 支持度這些技術指標，主要是從技術的維度來考察的。
考慮到實際開發場景中主要是兼容性問題比較突出，跑分不是最終目的，所以統一場景才是最重要的。下面看看 x5 的特點，可以做些什么。

典型行業解決方案介紹——白鷺引擎

目前針對HTML5游戲的解決方案已經非常多，針對成熟的技術類產品對比，通常有多個維度進行對比，不僅僅是技術層面，還有許多非技術層面的內容，這里不展開比較。

之所以選擇白鷺引擎來介紹，不僅僅是因為白鷺引擎擁有眾多成熟的產品可以一站式解決而受開發者熱捧，關鍵在于它還跟騰訊 X5 瀏覽器有深度合作，其好處不言而喻，恐怕會是微信游戲開發不二之選。
白鷺Egret引擎是一個開源免費的游戲框架，用于構建二維游戲、演示程序和其他圖形界面交互應用等。Egret使用TypeScript腳本語言開發。當游戲完成最終的打包后，可以將程序轉換為HTML5游戲。實現跨平臺特性。

Egret Runtime 是白鷺一款支持3D的HTML5游戲加速器，解決低端機對HTML5標準支持不佳、體驗差的弊端，適配不同的系統讓HTML5游戲效果媲美原生游戲。跟騰訊瀏覽器 x5的合作，直接支持了H5游戲運行所需的底層功能， 從根本上解決了碎片化和性能問題。

騰訊瀏覽器 X5 已經解決了 HTML5 游戲在各個應用場景的運行問題，而跟合作白鷺 Egret Runtime 又可以大幅優化終端體驗。根據官網介紹，在有 Egret Rumtime 加速的情況下，HTML5游戲會有3-5倍的性能提升，對比 PhoneGAP 方案約有30倍的性能提升，從而使 HTML5 游戲接近原生游戲的體驗。

HOW

一、如何借助 x5 內核來進行實踐？

通過騰訊瀏覽服務官網提供的 X5 內核接入指南，將提供的內核服務的sdk集成到應用中。由于 x5 內核是在 Android 原生 WebView 基礎上的二次開發，所以其提供的 在開發者調用接口上和原生保持一致，兼容原生 webview 的各種屬性設置，如果之前使用原始 webview 的幾乎時可以無縫替換。

雖然對于主流移動應用開發模式的討論已經是老生常談，之前熱議的 Hybrid 混合開發模式也被現在 ReactNative 、Weex 搶了風頭。關鍵還是越來越多的場景需要高度動態化的內容，保持對用戶友好且統一的體驗同時，考慮更多的輕便快捷交互、快速迭代更新的特性。

脫離實際的應用場景來討論哪一種開發模式孰優孰劣沒有意義，關鍵還是要貼合場景選擇最適合的，所以這里對三種開發模式的相關細節不展開討論，只針對開發有 Web 類場景需求的情況進行考慮：

相比Native App，Web 體驗中受限于以上5個因素：網絡環境，渲染性能，平臺特性，受限于瀏覽器內核，系統限制。

因此解決這些問題的關鍵在于提供一個良好的基礎運行環境和一個成熟的完整解決方案。借助 x5 內核可以改善運行環境，到達交互趨于一致性。

關于“一致性”經常被理解為同一個應用在各種平臺和場景下要有一致性的體驗。但是在移動平臺開發過程中，“一致性”應該是App視覺和交互習慣與其運行平臺的習慣保持一致，用戶整體體驗保持一致。而 Web 開發“一次開發，跨平臺運行”的特性與此存在一定程度上的沖突是合理的。

如上所述，借助 x5 內核的來進行實踐的目的也就是如此。下面就按照這個設計思路就來進行具體的 x5 嵌入實施過程，從技術角度切入后，通過編寫Demo試驗比對實際效果，來判斷帶來怎樣效益的提升。

二、要怎樣進行具體的實施過程，解決那些已有的問題？

具體實施過程大致分為嵌入集成和實際功能應用兩個部分。

集成 X5 內核

騰訊瀏覽服務 TBS 官網提供了 X5 內核SDK分為完整版和精簡版。精簡版不可獨立下載x5內核，只能共享使用微信或手Q的x5內核，JAR包約190Kb。而完整版可獨立下載x5內核，也可共享使用微信或手Q的x5內核，JAR包約280Kb。

由于X5內核的API接口和系統的保持高度一致，因此實際的使用方式與使用原生進行開發一樣。關于實際的編碼過程不展開描述，具體參照官方的接入文檔進行。

x5集成過程中發現了下面有幾個特點：

• 如果有安裝QQ 或 微信 （國內發布的版本），并且已經打開過內置- web，下拉網頁頂部空白處會出現了由x5內核提供技術，表示應用是可以使用共享的x5內核。
• 如果沒有安裝qq微信，應用不可以可以共享使用微信 或 QQ 中的 x5 內核，但是不能共享使用其他集成了x5應用的內核，只能使用完整版內核sdk包。
• 有些設備首次啟動無法啟用 x5 內核，需要進程重啟或首次啟動長耗時等待以后才能正常使用 x5 內核。
• 當無法使用 x5 內核，騰訊瀏覽服務 TBS SDK 會默認使用系統內置的webview，兩者接口保持高度一致。
• x5對視頻播放的支持很好，可全屏效果控制方便，騰訊也提供了配套的sdk后臺服務。

實際功能應用（X5EngineDemo 示例程序）

用QQ瀏覽器 X5 內核SDK和 X5 云端服務，解決移動端 webview 使用過程中出現困擾開發者需要適配兼容性的問題，提升性能的同時優化用戶的瀏覽體驗，有利于統一用戶設備基礎環境。

帶來的效益，主要是減少適配難度，提升產品兼容性和表現效果。成熟的產品和廣泛的用戶人群，提升保障同時減少出現不必要的麻煩，降低開發成本。

在開放中有使用Html5的Video控件來播放視頻的情況，為了舉例說明使用 x5 可以帶來的效益。下面就從展示網頁這個角度切入，對比看看 X5 內核能帶來的什么樣的效果：

從上圖測試可以看出，對于首次加載網頁，使用systemWebView進行網頁加載耗時要優于x5，針對有開啟緩存的情況喜愛，多次打開相同網頁情況，x5的耗時是略比系統的少。

H5 游戲測試

如下圖所示，在測試全屏H5游戲效果時，對比發現兩者在高硬件配置的設備上體驗差異不大，x5的幀率比較穩定。在某些低配置和低版本系統上運行時，x5的表現要優于系統瀏覽器內核，而且適配性更強。

播放網頁視頻

如下圖所示，測試騰訊視頻網站，發現使用系統 WebView 存在視頻加載錯誤的問題，而使用了 X5 內核的則是可以正常播放。

但是，接入 x5 內核的成本也是需要考慮，開發者對于 X5 的評價也褒貶不一。
下面測試嗶哩嗶哩彈幕網站的效果，在使用系統 webview 的情況下，是采用了嗶哩嗶哩帶有彈幕的播放器，可以正常播放的同時也支持彈幕的顯示。而采用了X5內核進行播放時，則自動替換成 x5 自帶的播放器，可以看到loading顯示的也是x5提供的界面，所以導致彈幕無法正常展示。

下面再看看全屏模式下的播放，x5 對比原生區別很明顯。而在測試 H5 游戲時，x5是能夠正常音畫同步，而系統webview則沒有正常背景音樂，幀率偶爾也會低了10左右，這些也都是很多開發者選擇 x5 的重要因素。

Native與JS交互效果測試（JsBridge）

首先我們來了解一下為什么要使用JSBridge，在開發中，為了追求開發的效率以及移植的便利性，一些展示性強的頁面我們會偏向于使用 H5 來完成，功能性強的頁面我們會偏向于使用 Native 來完成。
而一旦使用了 H5，為了在 H5 中盡可能的得到native的體驗，我們 Native 層需要暴露一些方法給js調用，比如，彈Toast提醒，彈Dialog，分享等等，有時候甚至把h5的網絡請求放著native去完成，而JSBridge做得好的一個典型就是微信，微信給開發者提供了JSSDK，該SDK中暴露了很多微信native層的方法，比如支付，定位等。

測試通過JsBridge進行webview中的js代碼調用本地java接口的效果，試驗進行輔助sdk開發的可行性。X5 內核也提供了js接口安全調研機制來保證webview本身的安全漏洞問題，而且也會及時響應 Google 對于瀏覽器內核漏洞的修復。

三、如何評判引入 x5 內核后帶來的提升？

** 總的來說，關于 X5 引入帶來的提升，可以從下面的維度去討論。在之前的對比分析中依舊有描述相關特性，而且關于實際表現很難定性指標依據，這里不再重復介紹。具體可以參照 Demo 中的實際使用效果，對比 X5 內核帶來的提升效果。**

• 頁面加載速度（部分頁面預加載緩存控制）
• 界面使用流暢度（游戲幀率，效果穩定性）
• 顯示兼容性（頁面兼容性，多機型適配，界面效果一致性，視頻播放等）
• 交互和特性支持（js支持豐富友好程度，新的HTML特性）
• 穩定性和安全性（安全漏洞補丁修復）
• 可持續性（迭代更新支持）

總結

通過預研X5內核，梳理了瀏覽器內核相關的概念，按照典型的 2W1H 模型對比分析X5內核其技術特性和實際應用場景，在技術試驗方面從多個維度來討論可應用性。

其實從前面的描述可以知道，騰訊推出 X5 內核主要是為了解決Android終端設備的差異性所造成的前端頁面適配和瀏覽體驗問題，意在打造一個可以讓開發者減少適配工作成本，提升用戶體驗的一致性，為移動應用提供基礎瀏覽器服務。

根據調研過程中對瀏覽器內核技術的學習，以及對市場成熟應用場景的分析，基于 X5 內核sdk，我們可以做些什么？

如果考慮開發 H5 游戲引擎，這個行業中已經太多的成熟解決方案，而且用戶普遍對H5游戲的接受程度還有待提高。像微信擁有很好的流量入口，本來是拓展H5游戲的好平臺，但是自身加以了嚴格限制，禁止朋友圈公眾號轉發H5游戲之類的。

假設基于x5做二次封裝，打造自己的sdk。但是 X5 跟系統 webview 接口保持高度一致，二次封裝只能是增加開發者使用難度。而且瀏覽器內核相當難以維護，因為快速迭代導致直接整合的成本太高。

如果做集成輔助類sdk，類似微信的JS-SDK，這是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包，目的是減少網頁開發者使用 js 與 微信App Native交互的成本。這里設想一個場景來考慮：
比如有這樣一個場景，一個網頁開發者打算開發一款游戲或者應用，但是考慮到開發成本和效益，直接通過實現H5界面后包成殼后，作為 App 來上架發布。這樣實現快速開發的同時，又可以進行動態化內容可以快速更新，減少傳統 App 迭代更新的各種弊端。

現在有很多類似白鷺引擎之類的廠商提供了一整套的解決方案，但是鏈接 H5 和 Native相關的設想確并不是很多。比如 H5 開發者使用native平臺本身的特性來進行交互設計的成本還是太大。雖然有類似 JsBridge 手段，但是同時兼顧js和native開發，需要網頁開發者更大的成本，而怎么提供更豐富流暢的H5交互體驗支持就是可以嘗試去解決的問題。

總之，可以利用 x5 的適配性強的特點展開更多豐富交互設計和提升用戶的設想，把瀏覽器內核這項基礎性的底層服務應用得更好。

部分參考資料：

各主流瀏覽器內核介紹
Layabox 解讀微信全面升級 X5 Blink 內核
主流瀏覽器內核介紹（前端開發值得了解的瀏覽器內核歷史）
Android WebView加載Chromium動態庫的過程分析
HTML5游戲引擎深度測評
騰訊X5聯手白鷺EgretRuntime 共推HTML5游戲
騰訊瀏覽服務
基于騰訊X5內核的混合APP開發模式
Hybrid APP架構設計思路
理解JSBridge
Android JSBridge的原理與實現

X5 示例Demo項目

X5EngineDemo GitHub 地址