X5 浏览器内核调研报告
關(guān)于這份調(diào)研報告，不是從技術(shù)角度深入探索，重點是從產(chǎn)品本身分析，通俗易懂才是重點。主要是為了鍛煉平時做技術(shù)調(diào)研和競品分析的能力，以及業(yè)務(wù)拓展的技術(shù)儲備。內(nèi)容有點多，下面 **X5 **內(nèi)核調(diào)研報告將分為三個環(huán)節(jié)：Why - What - How?描述。
按照經(jīng)典的 2W1H 的策略描述
?
?
?
WHY
一、Android 端為什么需要考慮瀏覽器內(nèi)核問題 ？
**一言以蔽之：你是要搞定一個 X5 上的兼容性問題，還是要搞定幾百臺安卓手機(jī)上的兼容性問題。**下面就從多個維度來分析兼容性問題：
系統(tǒng)內(nèi)置瀏覽器內(nèi)核差異化
對于 Android 系統(tǒng)，通常以下面四個節(jié)點作為重要劃分依據(jù)，分析瀏覽器內(nèi)核的差異性先系統(tǒng)差異性說起，下面是目前 Google 最新統(tǒng)計數(shù)據(jù)：
?
?
?
| Android 4.0以下 | 0.9% |
| Android 4.0 - Android 4.4 | 11.0% |
| Android 4.4 | 20.0% |
| Android5.0及以上 | 68.1% |
從上面數(shù)據(jù)來看，當(dāng)前絕大多數(shù) Android 手機(jī)使用的都是 Android 4.4 或以上的系統(tǒng)， 這也是System WebView 內(nèi)核大變更的分界線。?在 Android 4.4版本中，原本基于 Android WebKit 的 WebView 實現(xiàn)被換成基于Chromium的實現(xiàn)，新的 Chromium 實現(xiàn)專注于提供一致性的接口（為了兼容以前的應(yīng)用），而內(nèi)部的渲染引擎改為使用基于 Blink/Content 內(nèi)核的引擎，這實現(xiàn)不管是從功能上還是性能來講，都帶來巨大的提升。
Chromium是一個由Google主導(dǎo)的開源瀏覽器工程，Chrome瀏覽器會選擇在它的某一個穩(wěn)定版本進(jìn)行開發(fā)和發(fā)布。除了Chrome瀏覽器，Chrome OS也是基于Chromium開發(fā)的。
從 Android 5.0 開始，Google 把 Chromium blink內(nèi)核 webview 作為 apk 單獨從系統(tǒng)抽離出去，可以在應(yīng)用市場上面接收安裝更新。應(yīng)用可以直接使用該webview內(nèi)核，Google也可以及時發(fā)布更新，不用再通過更新系統(tǒng)才能更新瀏覽器內(nèi)核，也避免部分了 Android 系統(tǒng)碎片化問題。
?
?
?
Android 平臺碎片化
關(guān)于 Android 碎片化問題集中表現(xiàn)在下面幾個方面：
- 設(shè)備繁多，硬件配置參差不棄，設(shè)備性能各異，差距很大
- 品牌眾多，廠商標(biāo)準(zhǔn)不一致，定制化系統(tǒng)體驗不同
- 版本各異，國內(nèi)外系統(tǒng)環(huán)境差異巨大
- 分辨率不統(tǒng)一，各種類型尺寸眾多
下圖是 OpenSignal 在 2015 年 8 月發(fā)布的基礎(chǔ)統(tǒng)計數(shù)據(jù)，針對市場上常見的 1294 種手機(jī)品牌進(jìn)行了市場占有率統(tǒng)計，可以看出機(jī)型分布非常零碎。
?
?
?
下圖是關(guān)于 Android 設(shè)備分辨率的分布圖，可以看出 Android 設(shè)備各種類型尺寸眾多，開發(fā)者需要進(jìn)行適配的難度非常大。
?
?
?
特別是在 Android 系統(tǒng)開源但 Google 提供的基礎(chǔ)服務(wù)在國內(nèi)無法使用的情況下，國內(nèi)廠商往往拋棄了 Google 既有的規(guī)范，對系統(tǒng)進(jìn)行了大量的定制，導(dǎo)致設(shè)備ROM 與原生 Android 系統(tǒng)環(huán)境差異性巨大。
對于瀏覽器內(nèi)核也是如此，即便是Google推出了基于 Chromium blink 內(nèi)核實現(xiàn)的 WebView，但是很多國內(nèi)廠商對其進(jìn)行了精簡或替代，導(dǎo)致 WebView 內(nèi)核也是碎片化問題嚴(yán)重，這讓開發(fā)者直接使用系統(tǒng)瀏覽器內(nèi)核進(jìn)行開發(fā)產(chǎn)生了眾多顧慮，不同機(jī)型適配難度也大大增加。
二、目前移動端 H5 適配已有的問題是什么？
** 一言以蔽之：設(shè)備碎片化和UI風(fēng)格的自定義（動畫特效等）性能差。** 由于Android本身碎片化問題嚴(yán)重，不同設(shè)備上的體驗差異性太大，開發(fā)者很難全面適配。雖然Google在不斷引入行業(yè)中領(lǐng)先的技術(shù)改善體驗，但是短時間內(nèi)很難覆蓋，況且開源特性也導(dǎo)致很難統(tǒng)一各廠商對系統(tǒng)定制化的取舍。
在一些舊機(jī)型上面，就算h5頁面中圖片與文本信息并不多,但在WebView中展示的時候都會出現(xiàn)拖拽不流暢，切換留白、窗口閃爍等的現(xiàn)象，這是 WebView 自身渲染能力不強(qiáng)的問題所致。
又比如Html5的Video控件播放視頻，iOS點擊視頻部分，會用系統(tǒng)自帶的瀏覽器全屏播放視頻，體驗效果佳；而Android的WebView無法全屏，體驗效果差一些。 對于頁面加載慢，偶爾內(nèi)存泄露，不同 Android 系統(tǒng)版本采用了不同內(nèi)核的兼容問題等等，這些都是使用原生 webview 組件進(jìn)行開發(fā)時常會遇到的問題。
因此目前面臨的首要問題就是：如何解決當(dāng)前描述的移動端生態(tài)亂象。
三、為什么要用 X5 內(nèi)核來改善效果？（替騰訊瀏覽服務(wù) X5 內(nèi)核官網(wǎng)介紹背書）
騰訊瀏覽服務(wù)由QQ瀏覽器團(tuán)隊出品，致力于優(yōu)化移動端webview體驗的整套解決方案，使用QQ瀏覽器X5內(nèi)核SDK和X5云端服務(wù)，解決移動端webview使用過程中出現(xiàn)的一切問題，優(yōu)化用戶的瀏覽體驗。
X5 SDK是通過調(diào)用微信/手機(jī)QQ/空間的X5內(nèi)核，解決系統(tǒng)webview兼容性差、加載速度慢、功能缺陷等問題，開發(fā)接入便捷，大小只有253K，僅需幾行代碼，即可解決一切令開發(fā)者們頭疼的問題，為用戶提供最優(yōu)秀的瀏覽體驗。
其相對于系統(tǒng)webview，具有下述明顯優(yōu)勢：
四、小結(jié)
關(guān)于 Why 這個部分，主要通過分析當(dāng)前市場環(huán)境和開發(fā)者所面臨的問題，引出使用 x5 內(nèi)核必要性討論。 對于前端開發(fā)同學(xué)而言，考慮如何更加有效的適配盡可能多的設(shè)備，兼容更多的用戶環(huán)境，打造趨于一致的用戶體驗，在保證高度可用性的情況下，提供更多豐富的交互體驗。 騰訊對 x5 內(nèi)核的介紹看上去似乎是相當(dāng)可靠的，但它是什么，接下來還得一步一步討論關(guān)于瀏覽器內(nèi)核。
WHAT
一、關(guān)于瀏覽器內(nèi)核是什么？
關(guān)于瀏覽器內(nèi)核的討論可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。?渲染引擎負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。 JS 引擎則是解析 Javascript 語言，執(zhí)行 javascript 語言來實現(xiàn)網(wǎng)頁的動態(tài)效果。最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來 JS 引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。 瀏覽器內(nèi)核主要的作用是將頁面轉(zhuǎn)變成可視化的圖像結(jié)果，整個過程可以簡化描述成如下步驟：
?
?
?
2013 年以前，常見的瀏覽器內(nèi)核代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌開始研發(fā) blink 引擎，chrome 28 以后開始使用，而 opera 則放棄了自主研發(fā)的 Presto 引擎，投入谷歌懷抱，和谷歌一起研發(fā) blink 引擎，國內(nèi)各種 chrome系的瀏覽器（360、UC、QQ、百度等等）也紛紛放棄 webkit，投入 blink 的懷抱。
目前國內(nèi)主流瀏覽器內(nèi)核，如UC的U3內(nèi)核、QQ瀏覽器的X5內(nèi)核以及百度的T5內(nèi)核在之前的版本都是基于開源內(nèi)核 Webkit 開發(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(文檔對象模型)樹，DOM是一種文檔的表示方法.
- CSS解釋器：級聯(lián)樣式表的解釋器，主要作用是為DOM中各個元素對象計算出樣式信息，從而為計算最后網(wǎng)頁的布局提供基礎(chǔ)設(shè)施。
- 布局：在DOM創(chuàng)建之后，WebKit需要將其中的元素對象同樣式信息結(jié)合起來，計算他們的大小位置等布局信息，形成一個能夠表示這所有信息的內(nèi)部表示模型。
- JavaScript引擎：使用JavaScript代碼可以修改網(wǎng)頁的內(nèi)容，也能修改CSS的信息，JS引擎能夠解釋JS代碼并通過DOM接口和CSSOM接口來修改網(wǎng)頁內(nèi)容和樣式信息，從而改變渲染的結(jié)果。
- 繪圖：使用圖形庫將布局計算后的各個網(wǎng)頁的節(jié)點繪制成圖形結(jié)果。
?
?
?
關(guān)于Android 瀏覽器內(nèi)核
前面介紹有提到，在 Android 4.4版本中，原本基于 Android WebKit 的 WebView 實現(xiàn)被換成的Chromium實現(xiàn)，新的 Chromium 內(nèi)部的渲染引擎改為使用基于 Blink/Content 內(nèi)核的引擎。
關(guān)于 WebKit 和 Chromium 的區(qū)別，關(guān)鍵在于Google 放棄了之前由 Apple 主導(dǎo)的開源 WebKit，可以說 WebKit 是以前維系 Google 和 Apple 一個技術(shù)交流的重要紐帶。Chromium 是從一個 WebKit 分支基礎(chǔ)上逐漸走上了自研的道路，其采用了自研的 Blink 渲染引擎和 V8 JavaScript 引擎作為新內(nèi)核重要支撐。
下面基于高低Android系統(tǒng)版本的兩臺測試機(jī)型的實際表現(xiàn)，對 WebView 內(nèi)核在不同系統(tǒng)版本中的性能差異性進(jìn)行簡單量化：
?
?
?
從對比測試來看，在 Android 4.4 以上系統(tǒng)中基于 Chromium 內(nèi)核的開發(fā)的WebView對比舊版本的 WebKit 性能和兼容性方面有了顯著的提升，與之相對的是 Chromium 多進(jìn)程的特性導(dǎo)致內(nèi)存占用變大，而且?guī)煳募策_(dá)到了 28M 左右。 下圖是 Chromium 的架構(gòu)和主要模塊示意圖，從圖上可知 Blink 只是其中的一個模塊，和它并列的還有眾多的 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)核號稱適配 Android 全部主流平臺，可以在所有 Android 手機(jī)上使用Blink的技術(shù)能力，具有更好的 H5/CSS3 支持和性能。設(shè)備有安裝微信、手機(jī)QQ、QQ空間即可使用最新的 TBS2.3Blink 內(nèi)核。其官網(wǎng)提供了x5內(nèi)核相關(guān)參數(shù)信息：
?
?
?
實際對比測試表現(xiàn)：下面是在同一設(shè)備下，QQ 瀏覽器和 Google Chrome 瀏覽器在 H5 支持度對比數(shù)據(jù)。?設(shè)備 ：華為 Nexus 6p Android 7.1 測試平臺：https://html5test.com 左：QQ Browser 7.2 X5 內(nèi)核 右：Chrome Dev 55 Chromium 內(nèi)核
?
?
?
從實際測試對比來看，對比Chromium 內(nèi)核實際數(shù)據(jù)，X5 內(nèi)核的表現(xiàn)并不及預(yù)期。當(dāng)然測試依據(jù)主要是從兼容性和 H5 支持度這些技術(shù)指標(biāo)，主要是從技術(shù)的維度來考察的。 考慮到實際開發(fā)場景中主要是兼容性問題比較突出，跑分不是最終目的，所以統(tǒng)一場景才是最重要的。下面看看 x5 的特點，可以做些什么。
典型行業(yè)解決方案介紹——白鷺引擎
目前針對HTML5游戲的解決方案已經(jīng)非常多，針對成熟的技術(shù)類產(chǎn)品對比，通常有多個維度進(jìn)行對比，不僅僅是技術(shù)層面，還有許多非技術(shù)層面的內(nèi)容，這里不展開比較。
之所以選擇白鷺引擎來介紹，不僅僅是因為白鷺引擎擁有眾多成熟的產(chǎn)品可以一站式解決而受開發(fā)者熱捧，關(guān)鍵在于它還跟騰訊 X5 瀏覽器有深度合作，其好處不言而喻，恐怕會是微信游戲開發(fā)不二之選。 白鷺Egret引擎是一個開源免費的游戲框架，用于構(gòu)建二維游戲、演示程序和其他圖形界面交互應(yīng)用等。Egret使用TypeScript腳本語言開發(fā)。當(dāng)游戲完成最終的打包后，可以將程序轉(zhuǎn)換為HTML5游戲。實現(xiàn)跨平臺特性。
?
?
?
Egret Runtime 是白鷺一款支持3D的HTML5游戲加速器，解決低端機(jī)對HTML5標(biāo)準(zhǔn)支持不佳、體驗差的弊端，適配不同的系統(tǒng)讓HTML5游戲效果媲美原生游戲。跟騰訊瀏覽器 x5的合作，直接支持了H5游戲運行所需的底層功能， 從根本上解決了碎片化和性能問題。
騰訊瀏覽器 X5 已經(jīng)解決了 HTML5 游戲在各個應(yīng)用場景的運行問題，而跟合作白鷺 Egret Runtime 又可以大幅優(yōu)化終端體驗。根據(jù)官網(wǎng)介紹，在有 Egret Rumtime 加速的情況下，HTML5游戲會有3-5倍的性能提升，對比 PhoneGAP 方案約有30倍的性能提升，從而使 HTML5 游戲接近原生游戲的體驗。
HOW
一、如何借助 x5 內(nèi)核來進(jìn)行實踐？
通過騰訊瀏覽服務(wù)官網(wǎng)提供的 X5 內(nèi)核接入指南，將提供的內(nèi)核服務(wù)的sdk集成到應(yīng)用中。由于 x5 內(nèi)核是在 Android 原生 WebView 基礎(chǔ)上的二次開發(fā)，所以其提供的 在開發(fā)者調(diào)用接口上和原生保持一致，兼容原生 webview 的各種屬性設(shè)置，如果之前使用原始 webview 的幾乎時可以無縫替換。
雖然對于主流移動應(yīng)用開發(fā)模式的討論已經(jīng)是老生常談，之前熱議的 Hybrid 混合開發(fā)模式也被現(xiàn)在 ReactNative 、Weex 搶了風(fēng)頭。關(guān)鍵還是越來越多的場景需要高度動態(tài)化的內(nèi)容，保持對用戶友好且統(tǒng)一的體驗同時，考慮更多的輕便快捷交互、快速迭代更新的特性。
?
?
?
脫離實際的應(yīng)用場景來討論哪一種開發(fā)模式孰優(yōu)孰劣沒有意義，關(guān)鍵還是要貼合場景選擇最適合的，所以這里對三種開發(fā)模式的相關(guān)細(xì)節(jié)不展開討論，只針對開發(fā)有 Web 類場景需求的情況進(jìn)行考慮：
?
?
?
相比Native App，Web 體驗中受限于以上5個因素：網(wǎng)絡(luò)環(huán)境，渲染性能，平臺特性，受限于瀏覽器內(nèi)核，系統(tǒng)限制。
?
?
?
因此解決這些問題的關(guān)鍵在于提供一個良好的基礎(chǔ)運行環(huán)境和一個成熟的完整解決方案。借助 x5 內(nèi)核可以改善運行環(huán)境，到達(dá)交互趨于一致性。
關(guān)于“一致性”經(jīng)常被理解為同一個應(yīng)用在各種平臺和場景下要有一致性的體驗。但是在移動平臺開發(fā)過程中，“一致性”應(yīng)該是App視覺和交互習(xí)慣與其運行平臺的習(xí)慣保持一致，用戶整體體驗保持一致。而 Web 開發(fā)“一次開發(fā)，跨平臺運行”的特性與此存在一定程度上的沖突是合理的。
如上所述，借助 x5 內(nèi)核的來進(jìn)行實踐的目的也就是如此。下面就按照這個設(shè)計思路就來進(jìn)行具體的 x5 嵌入實施過程，從技術(shù)角度切入后，通過編寫Demo試驗比對實際效果，來判斷帶來怎樣效益的提升。
二、要怎樣進(jìn)行具體的實施過程，解決那些已有的問題？
具體實施過程大致分為嵌入集成和實際功能應(yīng)用兩個部分。
集成 X5 內(nèi)核
騰訊瀏覽服務(wù) TBS 官網(wǎng)提供了 X5 內(nèi)核SDK分為完整版和精簡版。精簡版不可獨立下載x5內(nèi)核，只能共享使用微信或手Q的x5內(nèi)核，JAR包約190Kb。而完整版可獨立下載x5內(nèi)核，也可共享使用微信或手Q的x5內(nèi)核，JAR包約280Kb。
由于X5內(nèi)核的API接口和系統(tǒng)的保持高度一致，因此實際的使用方式與使用原生進(jìn)行開發(fā)一樣。關(guān)于實際的編碼過程不展開描述，具體參照官方的接入文檔進(jìn)行。
x5集成過程中發(fā)現(xiàn)了下面有幾個特點：
- 如果有安裝QQ 或 微信 （國內(nèi)發(fā)布的版本），并且已經(jīng)打開過內(nèi)置- web，下拉網(wǎng)頁頂部空白處會出現(xiàn)了由x5內(nèi)核提供技術(shù)，表示應(yīng)用是可以使用共享的x5內(nèi)核。
- 如果沒有安裝qq微信，應(yīng)用不可以可以共享使用微信 或 QQ 中的 x5 內(nèi)核，但是不能共享使用其他集成了x5應(yīng)用的內(nèi)核，只能使用完整版內(nèi)核sdk包。
- 有些設(shè)備首次啟動無法啟用 x5 內(nèi)核，需要進(jìn)程重啟或首次啟動長耗時等待以后才能正常使用 x5 內(nèi)核。
- 當(dāng)無法使用 x5 內(nèi)核，騰訊瀏覽服務(wù) TBS SDK 會默認(rèn)使用系統(tǒng)內(nèi)置的webview，兩者接口保持高度一致。
- x5對視頻播放的支持很好，可全屏效果控制方便，騰訊也提供了配套的sdk后臺服務(wù)。
?
?
?
實際功能應(yīng)用（X5EngineDemo?示例程序）
用QQ瀏覽器 X5 內(nèi)核SDK和 X5 云端服務(wù)，解決移動端 webview 使用過程中出現(xiàn)困擾開發(fā)者需要適配兼容性的問題，提升性能的同時優(yōu)化用戶的瀏覽體驗，有利于統(tǒng)一用戶設(shè)備基礎(chǔ)環(huán)境。
帶來的效益，主要是減少適配難度，提升產(chǎn)品兼容性和表現(xiàn)效果。成熟的產(chǎn)品和廣泛的用戶人群，提升保障同時減少出現(xiàn)不必要的麻煩，降低開發(fā)成本。
在開放中有使用Html5的Video控件來播放視頻的情況，為了舉例說明使用 x5 可以帶來的效益。下面就從展示網(wǎng)頁這個角度切入，對比看看 X5 內(nèi)核能帶來的什么樣的效果：
?
?
?
?
?
?
從上圖測試可以看出，對于首次加載網(wǎng)頁，使用systemWebView進(jìn)行網(wǎng)頁加載耗時要優(yōu)于x5，針對有開啟緩存的情況喜愛，多次打開相同網(wǎng)頁情況，x5的耗時是略比系統(tǒng)的少。
H5 游戲測試
?
?
?
如下圖所示，在測試全屏H5游戲效果時，對比發(fā)現(xiàn)兩者在高硬件配置的設(shè)備上體驗差異不大，x5的幀率比較穩(wěn)定。在某些低配置和低版本系統(tǒng)上運行時，x5的表現(xiàn)要優(yōu)于系統(tǒng)瀏覽器內(nèi)核，而且適配性更強(qiáng)。
?
?
?
播放網(wǎng)頁視頻
?
?
?
如下圖所示，測試騰訊視頻網(wǎng)站，發(fā)現(xiàn)使用系統(tǒng) WebView 存在視頻加載錯誤的問題，而使用了 X5 內(nèi)核的則是可以正常播放。
?
?
?
但是，接入 x5 內(nèi)核的成本也是需要考慮，開發(fā)者對于 X5 的評價也褒貶不一。 下面測試嗶哩嗶哩彈幕網(wǎng)站的效果，在使用系統(tǒng) webview 的情況下，是采用了嗶哩嗶哩帶有彈幕的播放器，可以正常播放的同時也支持彈幕的顯示。而采用了X5內(nèi)核進(jìn)行播放時，則自動替換成 x5 自帶的播放器，可以看到loading顯示的也是x5提供的界面，所以導(dǎo)致彈幕無法正常展示。
?
?
?
下面再看看全屏模式下的播放，x5 對比原生區(qū)別很明顯。而在測試 H5 游戲時，x5是能夠正常音畫同步，而系統(tǒng)webview則沒有正常背景音樂，幀率偶爾也會低了10左右，這些也都是很多開發(fā)者選擇 x5 的重要因素。
?
?
?
Native與JS交互效果測試（JsBridge）
首先我們來了解一下為什么要使用JSBridge，在開發(fā)中，為了追求開發(fā)的效率以及移植的便利性，一些展示性強(qiáng)的頁面我們會偏向于使用 H5 來完成，功能性強(qiáng)的頁面我們會偏向于使用 Native 來完成。 而一旦使用了 H5，為了在 H5 中盡可能的得到native的體驗，我們 Native 層需要暴露一些方法給js調(diào)用，比如，彈Toast提醒，彈Dialog，分享等等，有時候甚至把h5的網(wǎng)絡(luò)請求放著native去完成，而JSBridge做得好的一個典型就是微信，微信給開發(fā)者提供了JSSDK，該SDK中暴露了很多微信native層的方法，比如支付，定位等。
?
?
?
測試通過JsBridge進(jìn)行webview中的js代碼調(diào)用本地java接口的效果，試驗進(jìn)行輔助sdk開發(fā)的可行性。X5 內(nèi)核也提供了js接口安全調(diào)研機(jī)制來保證webview本身的安全漏洞問題，而且也會及時響應(yīng) Google 對于瀏覽器內(nèi)核漏洞的修復(fù)。
三、如何評判引入 x5 內(nèi)核后帶來的提升？
** 總的來說，關(guān)于 X5 引入帶來的提升，可以從下面的維度去討論。在之前的對比分析中依舊有描述相關(guān)特性，而且關(guān)于實際表現(xiàn)很難定性指標(biāo)依據(jù)，這里不再重復(fù)介紹。具體可以參照 Demo 中的實際使用效果，對比 X5 內(nèi)核帶來的提升效果。**
- 頁面加載速度（部分頁面預(yù)加載緩存控制）
- 界面使用流暢度（游戲幀率，效果穩(wěn)定性）
- 顯示兼容性（頁面兼容性，多機(jī)型適配，界面效果一致性，視頻播放等）
- 交互和特性支持（js支持豐富友好程度，新的HTML特性）
- 穩(wěn)定性和安全性（安全漏洞補丁修復(fù)）
- 可持續(xù)性（迭代更新支持）
總結(jié)
通過預(yù)研X5內(nèi)核，梳理了瀏覽器內(nèi)核相關(guān)的概念，按照典型的 2W1H 模型對比分析X5內(nèi)核其技術(shù)特性和實際應(yīng)用場景，在技術(shù)試驗方面從多個維度來討論可應(yīng)用性。
其實從前面的描述可以知道，騰訊推出 X5 內(nèi)核主要是為了解決Android終端設(shè)備的差異性所造成的前端頁面適配和瀏覽體驗問題，意在打造一個可以讓開發(fā)者減少適配工作成本，提升用戶體驗的一致性，為移動應(yīng)用提供基礎(chǔ)瀏覽器服務(wù)。
根據(jù)調(diào)研過程中對瀏覽器內(nèi)核技術(shù)的學(xué)習(xí)，以及對市場成熟應(yīng)用場景的分析，基于 X5 內(nèi)核sdk，我們可以做些什么？
如果考慮開發(fā) H5 游戲引擎，這個行業(yè)中已經(jīng)太多的成熟解決方案，而且用戶普遍對H5游戲的接受程度還有待提高。像微信擁有很好的流量入口，本來是拓展H5游戲的好平臺，但是自身加以了嚴(yán)格限制，禁止朋友圈公眾號轉(zhuǎn)發(fā)H5游戲之類的。
假設(shè)基于x5做二次封裝，打造自己的sdk。但是 X5 跟系統(tǒng) webview 接口保持高度一致，二次封裝只能是增加開發(fā)者使用難度。而且瀏覽器內(nèi)核相當(dāng)難以維護(hù)，因為快速迭代導(dǎo)致直接整合的成本太高。
如果做集成輔助類sdk，類似微信的JS-SDK，這是微信公眾平臺面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包，目的是減少網(wǎng)頁開發(fā)者使用 js 與 微信App Native交互的成本。這里設(shè)想一個場景來考慮： 比如有這樣一個場景，一個網(wǎng)頁開發(fā)者打算開發(fā)一款游戲或者應(yīng)用，但是考慮到開發(fā)成本和效益，直接通過實現(xiàn)H5界面后包成殼后，作為 App 來上架發(fā)布。這樣實現(xiàn)快速開發(fā)的同時，又可以進(jìn)行動態(tài)化內(nèi)容可以快速更新，減少傳統(tǒng) App 迭代更新的各種弊端。
現(xiàn)在有很多類似白鷺引擎之類的廠商提供了一整套的解決方案，但是鏈接 H5 和 Native相關(guān)的設(shè)想確并不是很多。比如 H5 開發(fā)者使用native平臺本身的特性來進(jìn)行交互設(shè)計的成本還是太大。雖然有類似 JsBridge 手段，但是同時兼顧js和native開發(fā)，需要網(wǎng)頁開發(fā)者更大的成本，而怎么提供更豐富流暢的H5交互體驗支持就是可以嘗試去解決的問題。
總之，可以利用 x5 的適配性強(qiáng)的特點展開更多豐富交互設(shè)計和提升用戶的設(shè)想，把瀏覽器內(nèi)核這項基礎(chǔ)性的底層服務(wù)應(yīng)用得更好。
部分參考資料：
各主流瀏覽器內(nèi)核介紹
Layabox 解讀微信全面升級 X5 Blink 內(nèi)核
主流瀏覽器內(nèi)核介紹（前端開發(fā)值得了解的瀏覽器內(nèi)核歷史）
Android WebView加載Chromium動態(tài)庫的過程分析
HTML5游戲引擎深度測評
騰訊X5聯(lián)手白鷺EgretRuntime 共推HTML5游戲
騰訊瀏覽服務(wù)
基于騰訊X5內(nèi)核的混合APP開發(fā)模式
Hybrid APP架構(gòu)設(shè)計思路
理解JSBridge
Android JSBridge的原理與實現(xiàn)
X5 示例Demo項目
X5EngineDemo
總結(jié)
以上是生活随笔為你收集整理的X5 浏览器内核调研报告的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 破解无线网络密码
- 下一篇： Bigemap中添加离线地图数据包 教程