X5 瀏覽器內核調研報告

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

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

WHY

1、Android 端爲何須要考慮瀏覽器內核問題 ？

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

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

對於 Android 系統，一般如下面四個節點做爲重要劃分依據，分析瀏覽器內核的差別性先系統差別性提及，下面是目前 Google 最新統計數據：

系統版本	設備佔比
Android 4.0如下	0.9%
Android 4.0 - Android 4.4	11.0%
Android 4.4	20.0%
Android5.0及以上	68.1%

從上面數據來看，當前絕大多數 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 內核也是碎片化問題嚴重，這讓開發者直接使用系統瀏覽器內核進行開發產生了衆多顧慮，不一樣機型適配難度也大大增長。

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

** 一言以蔽之：設備碎片化和UI風格的自定義（動畫特效等）性能差。** 因爲Android自己碎片化問題嚴重，不一樣設備上的體驗差別性太大，開發者很難全面適配。雖然Google在不斷引入行業中領先的技術改善體驗，可是短期內很難覆蓋，何況開源特性也致使很難統一各廠商對系統定製化的取捨。

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

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

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

3、爲何要用 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內核提供的優秀服務，包括雲加速、雲安全、雲轉換三大功能。

4、小結

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

WHAT

1、關於瀏覽器內核是什麼？

關於瀏覽器內核的討論能夠分紅兩部分：渲染引擎(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等

2、關於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

1、如何藉助 x5 內核來進行實踐？

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

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

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

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

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

關於「一致性」常常被理解爲同一個應用在各類平臺和場景下要有一致性的體驗。可是在移動平臺開發過程當中，「一致性」應該是App視覺和交互習慣與其運行平臺的習慣保持一致，用戶總體體驗保持一致。而 Web 開發「一次開發，跨平臺運行」的特性與此存在必定程度上的衝突是合理的。

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

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

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

集成 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 對於瀏覽器內核漏洞的修復。

3、如何評判引入 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