關(guān)于這份調(diào)研報(bào)告，不是從技術(shù)角度深入探索响鹃，重點(diǎn)是從產(chǎn)品本身分析，通俗易懂才是重點(diǎn)案训。主要是為了鍛煉平時(shí)做技術(shù)調(diào)研和競(jìng)品分析的能力买置，以及業(yè)務(wù)拓展的技術(shù)儲(chǔ)備。內(nèi)容有點(diǎn)多强霎，下面 X5 內(nèi)核調(diào)研報(bào)告將分為三個(gè)環(huán)節(jié)：Why - What - How 描述忿项。
按照經(jīng)典的 2W1H 的策略描述
WHY
一、Android 端為什么需要考慮瀏覽器內(nèi)核問(wèn)題 城舞？
一言以蔽之：你是要搞定一個(gè) X5 上的兼容性問(wèn)題轩触，還是要搞定幾百臺(tái)安卓手機(jī)上的兼容性問(wèn)題。下面就從多個(gè)維度來(lái)分析兼容性問(wèn)題：
系統(tǒng)內(nèi)置瀏覽器內(nèi)核差異化
對(duì)于 Android 系統(tǒng)家夺，通常以下面四個(gè)節(jié)點(diǎn)作為重要?jiǎng)澐忠罁?jù)脱柱，分析瀏覽器內(nèi)核的差異性先系統(tǒng)差異性說(shuō)起，下面是目前 Google 最新統(tǒng)計(jì)數(shù)據(jù)：
| 系統(tǒng)版本 | 設(shè)備占比 |
|---|---|
| Android 4.0以下 | 0.9% |
| Android 4.0 - Android 4.4 | 11.0% |
| Android 4.4 | 20.0% |
| Android5.0及以上 | 68.1% |
從上面數(shù)據(jù)來(lái)看拉馋，當(dāng)前絕大多數(shù) Android 手機(jī)使用的都是 Android 4.4 或以上的系統(tǒng)榨为， 這也是System WebView 內(nèi)核大變更的分界線。
在 Android 4.4版本中煌茴，原本基于 Android WebKit 的 WebView 實(shí)現(xiàn)被換成基于Chromium的實(shí)現(xiàn)随闺，新的 Chromium 實(shí)現(xiàn)專注于提供一致性的接口（為了兼容以前的應(yīng)用），而內(nèi)部的渲染引擎改為使用基于 Blink/Content 內(nèi)核的引擎景馁，這實(shí)現(xiàn)不管是從功能上還是性能來(lái)講，都帶來(lái)巨大的提升逗鸣。
Chromium是一個(gè)由Google主導(dǎo)的開(kāi)源瀏覽器工程合住，Chrome瀏覽器會(huì)選擇在它的某一個(gè)穩(wěn)定版本進(jìn)行開(kāi)發(fā)和發(fā)布绰精。除了Chrome瀏覽器，Chrome OS也是基于Chromium開(kāi)發(fā)的透葛。
從 Android 5.0 開(kāi)始笨使，Google 把 Chromium blink內(nèi)核 webview 作為 apk 單獨(dú)從系統(tǒng)抽離出去，可以在應(yīng)用市場(chǎng)上面接收安裝更新僚害。應(yīng)用可以直接使用該webview內(nèi)核硫椰，Google也可以及時(shí)發(fā)布更新，不用再通過(guò)更新系統(tǒng)才能更新瀏覽器內(nèi)核萨蚕，也避免部分了 Android 系統(tǒng)碎片化問(wèn)題靶草。
Android 平臺(tái)碎片化
關(guān)于 Android 碎片化問(wèn)題集中表現(xiàn)在下面幾個(gè)方面：
- 設(shè)備繁多，硬件配置參差不棄岳遥，設(shè)備性能各異奕翔，差距很大
- 品牌眾多，廠商標(biāo)準(zhǔn)不一致浩蓉，定制化系統(tǒng)體驗(yàn)不同
- 版本各異派继，國(guó)內(nèi)外系統(tǒng)環(huán)境差異巨大
- 分辨率不統(tǒng)一，各種類型尺寸眾多
下圖是 OpenSignal 在 2015 年 8 月發(fā)布的基礎(chǔ)統(tǒng)計(jì)數(shù)據(jù)捻艳，針對(duì)市場(chǎng)上常見(jiàn)的 1294 種手機(jī)品牌進(jìn)行了市場(chǎng)占有率統(tǒng)計(jì)驾窟，可以看出機(jī)型分布非常零碎。
下圖是關(guān)于 Android 設(shè)備分辨率的分布圖认轨，可以看出 Android 設(shè)備各種類型尺寸眾多绅络，開(kāi)發(fā)者需要進(jìn)行適配的難度非常大。
特別是在 Android 系統(tǒng)開(kāi)源但 Google 提供的基礎(chǔ)服務(wù)在國(guó)內(nèi)無(wú)法使用的情況下好渠，國(guó)內(nèi)廠商往往拋棄了 Google 既有的規(guī)范昨稼，對(duì)系統(tǒng)進(jìn)行了大量的定制，導(dǎo)致設(shè)備ROM 與原生 Android 系統(tǒng)環(huán)境差異性巨大拳锚。
對(duì)于瀏覽器內(nèi)核也是如此假栓，即便是Google推出了基于 Chromium blink 內(nèi)核實(shí)現(xiàn)的 WebView，但是很多國(guó)內(nèi)廠商對(duì)其進(jìn)行了精簡(jiǎn)或替代霍掺，導(dǎo)致 WebView 內(nèi)核也是碎片化問(wèn)題嚴(yán)重匾荆，這讓開(kāi)發(fā)者直接使用系統(tǒng)瀏覽器內(nèi)核進(jìn)行開(kāi)發(fā)產(chǎn)生了眾多顧慮，不同機(jī)型適配難度也大大增加杆烁。
二牙丽、目前移動(dòng)端 H5 適配已有的問(wèn)題是什么？
** 一言以蔽之：設(shè)備碎片化和UI風(fēng)格的自定義（動(dòng)畫特效等）性能差兔魂。**
由于Android本身碎片化問(wèn)題嚴(yán)重烤芦，不同設(shè)備上的體驗(yàn)差異性太大，開(kāi)發(fā)者很難全面適配析校。雖然Google在不斷引入行業(yè)中領(lǐng)先的技術(shù)改善體驗(yàn)构罗，但是短時(shí)間內(nèi)很難覆蓋铜涉，況且開(kāi)源特性也導(dǎo)致很難統(tǒng)一各廠商對(duì)系統(tǒng)定制化的取舍。
在一些舊機(jī)型上面遂唧，就算h5頁(yè)面中圖片與文本信息并不多,但在WebView中展示的時(shí)候都會(huì)出現(xiàn)拖拽不流暢芙代，切換留白、窗口閃爍等的現(xiàn)象盖彭，這是 WebView 自身渲染能力不強(qiáng)的問(wèn)題所致纹烹。
又比如Html5的Video控件播放視頻，iOS點(diǎn)擊視頻部分召边，會(huì)用系統(tǒng)自帶的瀏覽器全屏播放視頻铺呵，體驗(yàn)效果佳；而Android的WebView無(wú)法全屏掌实，體驗(yàn)效果差一些陪蜻。
對(duì)于頁(yè)面加載慢，偶爾內(nèi)存泄露贱鼻，不同 Android 系統(tǒng)版本采用了不同內(nèi)核的兼容問(wèn)題等等宴卖，這些都是使用原生 webview 組件進(jìn)行開(kāi)發(fā)時(shí)常會(huì)遇到的問(wèn)題。
因此目前面臨的首要問(wèn)題就是：如何解決當(dāng)前描述的移動(dòng)端生態(tài)亂象邻悬。
三症昏、為什么要用 X5 內(nèi)核來(lái)改善效果？（替騰訊瀏覽服務(wù) X5 內(nèi)核官網(wǎng)介紹背書）
騰訊瀏覽服務(wù)由QQ瀏覽器團(tuán)隊(duì)出品父丰，致力于優(yōu)化移動(dòng)端webview體驗(yàn)的整套解決方案肝谭，使用QQ瀏覽器X5內(nèi)核SDK和X5云端服務(wù)，解決移動(dòng)端webview使用過(guò)程中出現(xiàn)的一切問(wèn)題蛾扇，優(yōu)化用戶的瀏覽體驗(yàn)攘烛。
X5 SDK是通過(guò)調(diào)用微信/手機(jī)QQ/空間的X5內(nèi)核，解決系統(tǒng)webview兼容性差镀首、加載速度慢坟漱、功能缺陷等問(wèn)題，開(kāi)發(fā)接入便捷更哄，大小只有253K芋齿，僅需幾行代碼，即可解決一切令開(kāi)發(fā)者們頭疼的問(wèn)題成翩，為用戶提供最優(yōu)秀的瀏覽體驗(yàn)觅捆。
其相對(duì)于系統(tǒng)webview，具有下述明顯優(yōu)勢(shì)：
- 速度快：相比系統(tǒng)webView的網(wǎng)頁(yè)加載速度有近30%的提升麻敌。
- 省流量：云端優(yōu)化技術(shù)使流量節(jié)省20%
- 更安全：24小時(shí)安全問(wèn)題解決機(jī)制
- 更穩(wěn)定：經(jīng)過(guò)億級(jí)用戶的使用考驗(yàn)栅炒，CRASH率0.15%
- 集成強(qiáng)大的視頻播放器，支持各種視頻格式直接打開(kāi)
- 適屏排版、字體設(shè)置等瀏覽增強(qiáng)功能的提供
- Html5更完整支持赢赊。
- 無(wú)系統(tǒng)內(nèi)核的碎片化問(wèn)題棒呛，更少的兼容性問(wèn)題
X5云端服務(wù)是通過(guò)云端技術(shù)保證用戶在未裝QQ瀏覽器的情況下同樣可以使用X5內(nèi)核提供的優(yōu)秀服務(wù)，包括云加速域携、云安全、云轉(zhuǎn)換三大功能鱼喉。
四秀鞭、小結(jié)
關(guān)于 Why 這個(gè)部分，主要通過(guò)分析當(dāng)前市場(chǎng)環(huán)境和開(kāi)發(fā)者所面臨的問(wèn)題扛禽，引出使用 x5 內(nèi)核必要性討論锋边。
對(duì)于前端開(kāi)發(fā)同學(xué)而言，考慮如何更加有效的適配盡可能多的設(shè)備编曼，兼容更多的用戶環(huán)境豆巨，打造趨于一致的用戶體驗(yàn)，在保證高度可用性的情況下掐场，提供更多豐富的交互體驗(yàn)往扔。
騰訊對(duì) x5 內(nèi)核的介紹看上去似乎是相當(dāng)可靠的，但它是什么熊户，接下來(lái)還得一步一步討論關(guān)于瀏覽器內(nèi)核萍膛。
WHAT
一、關(guān)于瀏覽器內(nèi)核是什么嚷堡？
關(guān)于瀏覽器內(nèi)核的討論可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎蝗罗。
渲染引擎負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML蝌戒、圖像等等）串塑、整理訊息（例如加入 CSS 等），以及計(jì)算網(wǎng)頁(yè)的顯示方式北苟，然后會(huì)輸出至顯示器或打印機(jī)桩匪。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同粹淋。
JS 引擎則是解析 Javascript 語(yǔ)言吸祟，執(zhí)行 javascript 語(yǔ)言來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。最開(kāi)始渲染引擎和 JS 引擎并沒(méi)有區(qū)分的很明確桃移，后來(lái) JS 引擎越來(lái)越獨(dú)立屋匕，內(nèi)核就傾向于只指渲染引擎。
瀏覽器內(nèi)核主要的作用是將頁(yè)面轉(zhuǎn)變成可視化的圖像結(jié)果借杰，整個(gè)過(guò)程可以簡(jiǎn)化描述成如下步驟：
2013 年以前过吻，常見(jiàn)的瀏覽器內(nèi)核代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)纤虽。2013 年乳绕，谷歌開(kāi)始研發(fā) blink 引擎，chrome 28 以后開(kāi)始使用逼纸，而 opera 則放棄了自主研發(fā)的 Presto 引擎洋措，投入谷歌懷抱，和谷歌一起研發(fā) blink 引擎杰刽，國(guó)內(nèi)各種 chrome系的瀏覽器（360菠发、UC、QQ贺嫂、百度等等）也紛紛放棄 webkit滓鸠，投入 blink 的懷抱。
目前國(guó)內(nèi)主流瀏覽器內(nèi)核第喳，如UC的U3內(nèi)核糜俗、QQ瀏覽器的X5內(nèi)核以及百度的T5內(nèi)核在之前的版本都是基于開(kāi)源內(nèi)核 Webkit 開(kāi)發(fā)，所以是在 Webkit 的基礎(chǔ)上進(jìn)行二次優(yōu)化曲饱，在功能與性能上大同小異悠抹。而后隨著 chrome 的發(fā)展，也逐漸轉(zhuǎn)為了 blink 內(nèi)核扩淀。
瀏覽器內(nèi)核渲染引擎的基礎(chǔ)結(jié)構(gòu)
從內(nèi)核整體結(jié)構(gòu)上看锌钮，渲染引擎可以概括為主要包括HTML解釋器、CSS解釋器引矩、布局和JavaScript引擎梁丘、繪圖等：
- HTML解釋器：解釋HTML文本的解釋器，主要作用是將HTML文本解釋成DOM(文檔對(duì)象模型)樹(shù)旺韭，DOM是一種文檔的表示方法.
- CSS解釋器：級(jí)聯(lián)樣式表的解釋器氛谜，主要作用是為DOM中各個(gè)元素對(duì)象計(jì)算出樣式信息，從而為計(jì)算最后網(wǎng)頁(yè)的布局提供基礎(chǔ)設(shè)施区端。
- 布局：在DOM創(chuàng)建之后值漫，WebKit需要將其中的元素對(duì)象同樣式信息結(jié)合起來(lái)，計(jì)算他們的大小位置等布局信息织盼，形成一個(gè)能夠表示這所有信息的內(nèi)部表示模型杨何。
- JavaScript引擎：使用JavaScript代碼可以修改網(wǎng)頁(yè)的內(nèi)容招刨，也能修改CSS的信息躲查，JS引擎能夠解釋JS代碼并通過(guò)DOM接口和CSSOM接口來(lái)修改網(wǎng)頁(yè)內(nèi)容和樣式信息，從而改變渲染的結(jié)果悍及。
- 繪圖：使用圖形庫(kù)將布局計(jì)算后的各個(gè)網(wǎng)頁(yè)的節(jié)點(diǎn)繪制成圖形結(jié)果唐全。
關(guān)于Android 瀏覽器內(nèi)核
前面介紹有提到埃跷，在 Android 4.4版本中蕊玷，原本基于 Android WebKit 的 WebView 實(shí)現(xiàn)被換成的Chromium實(shí)現(xiàn)，新的 Chromium 內(nèi)部的渲染引擎改為使用基于 Blink/Content 內(nèi)核的引擎弥雹。
關(guān)于 WebKit 和 Chromium 的區(qū)別垃帅，關(guān)鍵在于Google 放棄了之前由 Apple 主導(dǎo)的開(kāi)源 WebKit，可以說(shuō) WebKit 是以前維系 Google 和 Apple 一個(gè)技術(shù)交流的重要紐帶剪勿。Chromium 是從一個(gè) WebKit 分支基礎(chǔ)上逐漸走上了自研的道路贸诚，其采用了自研的 Blink 渲染引擎和 V8 JavaScript 引擎作為新內(nèi)核重要支撐。
下面基于高低Android系統(tǒng)版本的兩臺(tái)測(cè)試機(jī)型的實(shí)際表現(xiàn)厕吉，對(duì) WebView 內(nèi)核在不同系統(tǒng)版本中的性能差異性進(jìn)行簡(jiǎn)單量化：
從對(duì)比測(cè)試來(lái)看赦颇，在 Android 4.4 以上系統(tǒng)中基于 Chromium 內(nèi)核的開(kāi)發(fā)的WebView對(duì)比舊版本的 WebKit 性能和兼容性方面有了顯著的提升，與之相對(duì)的是 Chromium 多進(jìn)程的特性導(dǎo)致內(nèi)存占用變大赴涵，而且?guī)煳募策_(dá)到了 28M 左右。
下圖是 Chromium 的架構(gòu)和主要模塊示意圖订讼，從圖上可知 Blink 只是其中的一個(gè)模塊髓窜，和它并列的還有眾多的 Chromium 模塊，包括 GPU/CommandBuffe r(硬件加速架構(gòu))欺殿、V8 JavaScript 引擎寄纵、沙箱模型、CC(Chromium合成器)脖苏、IPC程拭、UI等
二、關(guān)于x5 內(nèi)核有什么優(yōu)劣棍潘，是否有其他成熟解決方案恃鞋？
騰訊瀏覽器服務(wù) TBS —— X5內(nèi)核
騰訊瀏覽服務(wù) TBS 在 2.3 版本中，其 X5 內(nèi)核就是基于 Android 5.0 WebView Blink內(nèi)核（M37版本）適配定制優(yōu)化亦歉。
X5 內(nèi)核號(hào)稱適配 Android 全部主流平臺(tái)恤浪，可以在所有 Android 手機(jī)上使用Blink的技術(shù)能力，具有更好的 H5/CSS3 支持和性能肴楷。設(shè)備有安裝微信水由、手機(jī)QQ、QQ空間即可使用最新的 TBS2.3Blink 內(nèi)核赛蔫。其官網(wǎng)提供了x5內(nèi)核相關(guān)參數(shù)信息：
實(shí)際對(duì)比測(cè)試表現(xiàn)：下面是在同一設(shè)備下砂客，QQ 瀏覽器和 Google Chrome 瀏覽器在 H5 支持度對(duì)比數(shù)據(jù)。
設(shè)備 ：華為 Nexus 6p Android 7.1
測(cè)試平臺(tái)：https://html5test.com
左：QQ Browser 7.2 X5 內(nèi)核
右：Chrome Dev 55 Chromium 內(nèi)核
從實(shí)際測(cè)試對(duì)比來(lái)看呵恢，對(duì)比Chromium 內(nèi)核實(shí)際數(shù)據(jù)鞠值，X5 內(nèi)核的表現(xiàn)并不及預(yù)期。當(dāng)然測(cè)試依據(jù)主要是從兼容性和 H5 支持度這些技術(shù)指標(biāo)渗钉，主要是從技術(shù)的維度來(lái)考察的齿诉。
考慮到實(shí)際開(kāi)發(fā)場(chǎng)景中主要是兼容性問(wèn)題比較突出，跑分不是最終目的，所以統(tǒng)一場(chǎng)景才是最重要的粤剧。下面看看 x5 的特點(diǎn)歇竟，可以做些什么。
典型行業(yè)解決方案介紹——白鷺引擎
目前針對(duì)HTML5游戲的解決方案已經(jīng)非常多抵恋，針對(duì)成熟的技術(shù)類產(chǎn)品對(duì)比焕议，通常有多個(gè)維度進(jìn)行對(duì)比，不僅僅是技術(shù)層面弧关，還有許多非技術(shù)層面的內(nèi)容盅安，這里不展開(kāi)比較。
之所以選擇白鷺引擎來(lái)介紹世囊，不僅僅是因?yàn)榘樢鎿碛斜姸喑墒斓漠a(chǎn)品可以一站式解決而受開(kāi)發(fā)者熱捧别瞭，關(guān)鍵在于它還跟騰訊 X5 瀏覽器有深度合作，其好處不言而喻株憾，恐怕會(huì)是微信游戲開(kāi)發(fā)不二之選蝙寨。
白鷺Egret引擎是一個(gè)開(kāi)源免費(fèi)的游戲框架，用于構(gòu)建二維游戲嗤瞎、演示程序和其他圖形界面交互應(yīng)用等墙歪。Egret使用TypeScript腳本語(yǔ)言開(kāi)發(fā)。當(dāng)游戲完成最終的打包后贝奇，可以將程序轉(zhuǎn)換為HTML5游戲。實(shí)現(xiàn)跨平臺(tái)特性掉瞳。
Egret Runtime 是白鷺一款支持3D的HTML5游戲加速器毕源，解決低端機(jī)對(duì)HTML5標(biāo)準(zhǔn)支持不佳、體驗(yàn)差的弊端陕习，適配不同的系統(tǒng)讓HTML5游戲效果媲美原生游戲脑豹。跟騰訊瀏覽器 x5的合作，直接支持了H5游戲運(yùn)行所需的底層功能衡查， 從根本上解決了碎片化和性能問(wèn)題瘩欺。
騰訊瀏覽器 X5 已經(jīng)解決了 HTML5 游戲在各個(gè)應(yīng)用場(chǎng)景的運(yùn)行問(wèn)題，而跟合作白鷺 Egret Runtime 又可以大幅優(yōu)化終端體驗(yàn)拌牲。根據(jù)官網(wǎng)介紹俱饿，在有 Egret Rumtime 加速的情況下，HTML5游戲會(huì)有3-5倍的性能提升塌忽，對(duì)比 PhoneGAP 方案約有30倍的性能提升拍埠，從而使 HTML5 游戲接近原生游戲的體驗(yàn)。
HOW
一土居、如何借助 x5 內(nèi)核來(lái)進(jìn)行實(shí)踐枣购？
通過(guò)騰訊瀏覽服務(wù)官網(wǎng)提供的 X5 內(nèi)核接入指南嬉探，將提供的內(nèi)核服務(wù)的sdk集成到應(yīng)用中。由于 x5 內(nèi)核是在 Android 原生 WebView 基礎(chǔ)上的二次開(kāi)發(fā)棉圈，所以其提供的 在開(kāi)發(fā)者調(diào)用接口上和原生保持一致涩堤，兼容原生 webview 的各種屬性設(shè)置，如果之前使用原始 webview 的幾乎時(shí)可以無(wú)縫替換分瘾。
雖然對(duì)于主流移動(dòng)應(yīng)用開(kāi)發(fā)模式的討論已經(jīng)是老生常談胎围，之前熱議的 Hybrid 混合開(kāi)發(fā)模式也被現(xiàn)在 ReactNative 、Weex 搶了風(fēng)頭德召。關(guān)鍵還是越來(lái)越多的場(chǎng)景需要高度動(dòng)態(tài)化的內(nèi)容白魂，保持對(duì)用戶友好且統(tǒng)一的體驗(yàn)同時(shí)，考慮更多的輕便快捷交互上岗、快速迭代更新的特性福荸。
脫離實(shí)際的應(yīng)用場(chǎng)景來(lái)討論哪一種開(kāi)發(fā)模式孰優(yōu)孰劣沒(méi)有意義，關(guān)鍵還是要貼合場(chǎng)景選擇最適合的肴掷，所以這里對(duì)三種開(kāi)發(fā)模式的相關(guān)細(xì)節(jié)不展開(kāi)討論敬锐，只針對(duì)開(kāi)發(fā)有 Web 類場(chǎng)景需求的情況進(jìn)行考慮：
相比Native App，Web 體驗(yàn)中受限于以上5個(gè)因素：網(wǎng)絡(luò)環(huán)境捆等，渲染性能，平臺(tái)特性续室，受限于瀏覽器內(nèi)核栋烤，系統(tǒng)限制。
因此解決這些問(wèn)題的關(guān)鍵在于提供一個(gè)良好的基礎(chǔ)運(yùn)行環(huán)境和一個(gè)成熟的完整解決方案挺狰。借助 x5 內(nèi)核可以改善運(yùn)行環(huán)境明郭，到達(dá)交互趨于一致性。
關(guān)于“一致性”經(jīng)常被理解為同一個(gè)應(yīng)用在各種平臺(tái)和場(chǎng)景下要有一致性的體驗(yàn)丰泊。但是在移動(dòng)平臺(tái)開(kāi)發(fā)過(guò)程中薯定，“一致性”應(yīng)該是App視覺(jué)和交互習(xí)慣與其運(yùn)行平臺(tái)的習(xí)慣保持一致，用戶整體體驗(yàn)保持一致瞳购。而 Web 開(kāi)發(fā)“一次開(kāi)發(fā)话侄，跨平臺(tái)運(yùn)行”的特性與此存在一定程度上的沖突是合理的。
如上所述学赛，借助 x5 內(nèi)核的來(lái)進(jìn)行實(shí)踐的目的也就是如此年堆。下面就按照這個(gè)設(shè)計(jì)思路就來(lái)進(jìn)行具體的 x5 嵌入實(shí)施過(guò)程，從技術(shù)角度切入后盏浇，通過(guò)編寫Demo試驗(yàn)比對(duì)實(shí)際效果变丧，來(lái)判斷帶來(lái)怎樣效益的提升。
二绢掰、要怎樣進(jìn)行具體的實(shí)施過(guò)程痒蓬，解決那些已有的問(wèn)題童擎？
具體實(shí)施過(guò)程大致分為嵌入集成和實(shí)際功能應(yīng)用兩個(gè)部分。
集成 X5 內(nèi)核
騰訊瀏覽服務(wù) TBS 官網(wǎng)提供了 X5 內(nèi)核SDK分為完整版和精簡(jiǎn)版攻晒。精簡(jiǎn)版不可獨(dú)立下載x5內(nèi)核顾复，只能共享使用微信或手Q的x5內(nèi)核，JAR包約190Kb炎辨。而完整版可獨(dú)立下載x5內(nèi)核捕透，也可共享使用微信或手Q的x5內(nèi)核，JAR包約280Kb碴萧。
由于X5內(nèi)核的API接口和系統(tǒng)的保持高度一致乙嘀，因此實(shí)際的使用方式與使用原生進(jìn)行開(kāi)發(fā)一樣。關(guān)于實(shí)際的編碼過(guò)程不展開(kāi)描述破喻，具體參照官方的接入文檔進(jìn)行虎谢。
x5集成過(guò)程中發(fā)現(xiàn)了下面有幾個(gè)特點(diǎn)：
- 如果有安裝QQ 或 微信 （國(guó)內(nèi)發(fā)布的版本），并且已經(jīng)打開(kāi)過(guò)內(nèi)置- web曹质，下拉網(wǎng)頁(yè)頂部空白處會(huì)出現(xiàn)了由x5內(nèi)核提供技術(shù)婴噩，表示應(yīng)用是可以使用共享的x5內(nèi)核。
- 如果沒(méi)有安裝qq微信羽德，應(yīng)用不可以可以共享使用微信 或 QQ 中的 x5 內(nèi)核几莽，但是不能共享使用其他集成了x5應(yīng)用的內(nèi)核，只能使用完整版內(nèi)核sdk包宅静。
- 有些設(shè)備首次啟動(dòng)無(wú)法啟用 x5 內(nèi)核章蚣，需要進(jìn)程重啟或首次啟動(dòng)長(zhǎng)耗時(shí)等待以后才能正常使用 x5 內(nèi)核。
- 當(dāng)無(wú)法使用 x5 內(nèi)核姨夹，騰訊瀏覽服務(wù) TBS SDK 會(huì)默認(rèn)使用系統(tǒng)內(nèi)置的webview纤垂，兩者接口保持高度一致。
- x5對(duì)視頻播放的支持很好磷账，可全屏效果控制方便峭沦，騰訊也提供了配套的sdk后臺(tái)服務(wù)。
實(shí)際功能應(yīng)用（X5EngineDemo 示例程序）
用QQ瀏覽器 X5 內(nèi)核SDK和 X5 云端服務(wù)逃糟，解決移動(dòng)端 webview 使用過(guò)程中出現(xiàn)困擾開(kāi)發(fā)者需要適配兼容性的問(wèn)題吼鱼，提升性能的同時(shí)優(yōu)化用戶的瀏覽體驗(yàn)，有利于統(tǒng)一用戶設(shè)備基礎(chǔ)環(huán)境绰咽。
帶來(lái)的效益蛉抓，主要是減少適配難度，提升產(chǎn)品兼容性和表現(xiàn)效果剃诅。成熟的產(chǎn)品和廣泛的用戶人群巷送，提升保障同時(shí)減少出現(xiàn)不必要的麻煩，降低開(kāi)發(fā)成本矛辕。
在開(kāi)放中有使用Html5的Video控件來(lái)播放視頻的情況笑跛，為了舉例說(shuō)明使用 x5 可以帶來(lái)的效益付魔。下面就從展示網(wǎng)頁(yè)這個(gè)角度切入，對(duì)比看看 X5 內(nèi)核能帶來(lái)的什么樣的效果：
從上圖測(cè)試可以看出飞蹂，對(duì)于首次加載網(wǎng)頁(yè)几苍，使用systemWebView進(jìn)行網(wǎng)頁(yè)加載耗時(shí)要優(yōu)于x5，針對(duì)有開(kāi)啟緩存的情況喜愛(ài)陈哑，多次打開(kāi)相同網(wǎng)頁(yè)情況妻坝，x5的耗時(shí)是略比系統(tǒng)的少。
H5 游戲測(cè)試
如下圖所示惊窖，在測(cè)試全屏H5游戲效果時(shí)刽宪，對(duì)比發(fā)現(xiàn)兩者在高硬件配置的設(shè)備上體驗(yàn)差異不大，x5的幀率比較穩(wěn)定界酒。在某些低配置和低版本系統(tǒng)上運(yùn)行時(shí)圣拄，x5的表現(xiàn)要優(yōu)于系統(tǒng)瀏覽器內(nèi)核，而且適配性更強(qiáng)毁欣。
播放網(wǎng)頁(yè)視頻
如下圖所示庇谆，測(cè)試騰訊視頻網(wǎng)站，發(fā)現(xiàn)使用系統(tǒng) WebView 存在視頻加載錯(cuò)誤的問(wèn)題凭疮，而使用了 X5 內(nèi)核的則是可以正常播放饭耳。
但是，接入 x5 內(nèi)核的成本也是需要考慮执解，開(kāi)發(fā)者對(duì)于 X5 的評(píng)價(jià)也褒貶不一寞肖。
下面測(cè)試嗶哩嗶哩彈幕網(wǎng)站的效果，在使用系統(tǒng) webview 的情況下材鹦，是采用了嗶哩嗶哩帶有彈幕的播放器逝淹，可以正常播放的同時(shí)也支持彈幕的顯示耕姊。而采用了X5內(nèi)核進(jìn)行播放時(shí)桶唐，則自動(dòng)替換成 x5 自帶的播放器，可以看到loading顯示的也是x5提供的界面茉兰，所以導(dǎo)致彈幕無(wú)法正常展示尤泽。
下面再看看全屏模式下的播放，x5 對(duì)比原生區(qū)別很明顯规脸。而在測(cè)試 H5 游戲時(shí)坯约，x5是能夠正常音畫同步，而系統(tǒng)webview則沒(méi)有正常背景音樂(lè)莫鸭，幀率偶爾也會(huì)低了10左右闹丐，這些也都是很多開(kāi)發(fā)者選擇 x5 的重要因素。
Native與JS交互效果測(cè)試（JsBridge）
首先我們來(lái)了解一下為什么要使用JSBridge被因，在開(kāi)發(fā)中卿拴，為了追求開(kāi)發(fā)的效率以及移植的便利性衫仑，一些展示性強(qiáng)的頁(yè)面我們會(huì)偏向于使用 H5 來(lái)完成，功能性強(qiáng)的頁(yè)面我們會(huì)偏向于使用 Native 來(lái)完成堕花。
而一旦使用了 H5文狱，為了在 H5 中盡可能的得到native的體驗(yàn)，我們 Native 層需要暴露一些方法給js調(diào)用缘挽，比如瞄崇，彈Toast提醒，彈Dialog壕曼，分享等等苏研，有時(shí)候甚至把h5的網(wǎng)絡(luò)請(qǐng)求放著native去完成，而JSBridge做得好的一個(gè)典型就是微信窝稿，微信給開(kāi)發(fā)者提供了JSSDK楣富，該SDK中暴露了很多微信native層的方法，比如支付伴榔，定位等纹蝴。
測(cè)試通過(guò)JsBridge進(jìn)行webview中的js代碼調(diào)用本地java接口的效果，試驗(yàn)進(jìn)行輔助sdk開(kāi)發(fā)的可行性踪少。X5 內(nèi)核也提供了js接口安全調(diào)研機(jī)制來(lái)保證webview本身的安全漏洞問(wèn)題塘安，而且也會(huì)及時(shí)響應(yīng) Google 對(duì)于瀏覽器內(nèi)核漏洞的修復(fù)。
三援奢、如何評(píng)判引入 x5 內(nèi)核后帶來(lái)的提升兼犯？
** 總的來(lái)說(shuō)，關(guān)于 X5 引入帶來(lái)的提升集漾，可以從下面的維度去討論切黔。在之前的對(duì)比分析中依舊有描述相關(guān)特性，而且關(guān)于實(shí)際表現(xiàn)很難定性指標(biāo)依據(jù)具篇，這里不再重復(fù)介紹纬霞。具體可以參照 Demo 中的實(shí)際使用效果，對(duì)比 X5 內(nèi)核帶來(lái)的提升效果驱显。**
- 頁(yè)面加載速度（部分頁(yè)面預(yù)加載緩存控制）
- 界面使用流暢度（游戲幀率诗芜，效果穩(wěn)定性）
- 顯示兼容性（頁(yè)面兼容性，多機(jī)型適配埃疫，界面效果一致性伏恐，視頻播放等）
- 交互和特性支持（js支持豐富友好程度，新的HTML特性）
- 穩(wěn)定性和安全性（安全漏洞補(bǔ)丁修復(fù)）
- 可持續(xù)性（迭代更新支持）
總結(jié)
通過(guò)預(yù)研X5內(nèi)核栓霜，梳理了瀏覽器內(nèi)核相關(guān)的概念翠桦，按照典型的 2W1H 模型對(duì)比分析X5內(nèi)核其技術(shù)特性和實(shí)際應(yīng)用場(chǎng)景，在技術(shù)試驗(yàn)方面從多個(gè)維度來(lái)討論可應(yīng)用性胳蛮。
其實(shí)從前面的描述可以知道销凑，騰訊推出 X5 內(nèi)核主要是為了解決Android終端設(shè)備的差異性所造成的前端頁(yè)面適配和瀏覽體驗(yàn)問(wèn)題愁铺，意在打造一個(gè)可以讓開(kāi)發(fā)者減少適配工作成本，提升用戶體驗(yàn)的一致性闻鉴，為移動(dòng)應(yīng)用提供基礎(chǔ)瀏覽器服務(wù)茵乱。
根據(jù)調(diào)研過(guò)程中對(duì)瀏覽器內(nèi)核技術(shù)的學(xué)習(xí)，以及對(duì)市場(chǎng)成熟應(yīng)用場(chǎng)景的分析孟岛，基于 X5 內(nèi)核sdk瓶竭，我們可以做些什么？
如果考慮開(kāi)發(fā) H5 游戲引擎渠羞，這個(gè)行業(yè)中已經(jīng)太多的成熟解決方案斤贰，而且用戶普遍對(duì)H5游戲的接受程度還有待提高。像微信擁有很好的流量入口次询，本來(lái)是拓展H5游戲的好平臺(tái)荧恍，但是自身加以了嚴(yán)格限制，禁止朋友圈公眾號(hào)轉(zhuǎn)發(fā)H5游戲之類的屯吊。
假設(shè)基于x5做二次封裝送巡，打造自己的sdk。但是 X5 跟系統(tǒng) webview 接口保持高度一致盒卸，二次封裝只能是增加開(kāi)發(fā)者使用難度骗爆。而且瀏覽器內(nèi)核相當(dāng)難以維護(hù)，因?yàn)榭焖俚鷮?dǎo)致直接整合的成本太高蔽介。
如果做集成輔助類sdk摘投，類似微信的JS-SDK，這是微信公眾平臺(tái)面向網(wǎng)頁(yè)開(kāi)發(fā)者提供的基于微信內(nèi)的網(wǎng)頁(yè)開(kāi)發(fā)工具包虹蓄，目的是減少網(wǎng)頁(yè)開(kāi)發(fā)者使用 js 與 微信App Native交互的成本犀呼。這里設(shè)想一個(gè)場(chǎng)景來(lái)考慮：
比如有這樣一個(gè)場(chǎng)景，一個(gè)網(wǎng)頁(yè)開(kāi)發(fā)者打算開(kāi)發(fā)一款游戲或者應(yīng)用薇组，但是考慮到開(kāi)發(fā)成本和效益外臂，直接通過(guò)實(shí)現(xiàn)H5界面后包成殼后，作為 App 來(lái)上架發(fā)布体箕。這樣實(shí)現(xiàn)快速開(kāi)發(fā)的同時(shí)专钉，又可以進(jìn)行動(dòng)態(tài)化內(nèi)容可以快速更新挑童，減少傳統(tǒng) App 迭代更新的各種弊端累铅。
現(xiàn)在有很多類似白鷺引擎之類的廠商提供了一整套的解決方案，但是鏈接 H5 和 Native相關(guān)的設(shè)想確并不是很多站叼。比如 H5 開(kāi)發(fā)者使用native平臺(tái)本身的特性來(lái)進(jìn)行交互設(shè)計(jì)的成本還是太大娃兽。雖然有類似 JsBridge 手段，但是同時(shí)兼顧js和native開(kāi)發(fā)尽楔，需要網(wǎng)頁(yè)開(kāi)發(fā)者更大的成本投储，而怎么提供更豐富流暢的H5交互體驗(yàn)支持就是可以嘗試去解決的問(wèn)題第练。
總之，可以利用 x5 的適配性強(qiáng)的特點(diǎn)展開(kāi)更多豐富交互設(shè)計(jì)和提升用戶的設(shè)想玛荞，把瀏覽器內(nèi)核這項(xiàng)基礎(chǔ)性的底層服務(wù)應(yīng)用得更好娇掏。
部分參考資料：
各主流瀏覽器內(nèi)核介紹
Layabox 解讀微信全面升級(jí) X5 Blink 內(nèi)核
主流瀏覽器內(nèi)核介紹（前端開(kāi)發(fā)值得了解的瀏覽器內(nèi)核歷史）
Android WebView加載Chromium動(dòng)態(tài)庫(kù)的過(guò)程分析
HTML5游戲引擎深度測(cè)評(píng)
騰訊X5聯(lián)手白鷺EgretRuntime 共推HTML5游戲
騰訊瀏覽服務(wù)
基于騰訊X5內(nèi)核的混合APP開(kāi)發(fā)模式
Hybrid APP架構(gòu)設(shè)計(jì)思路
理解JSBridge
Android JSBridge的原理與實(shí)現(xiàn)
