問(wèn)題：
從研發(fā)cordova混編App開(kāi)發(fā)開(kāi)始，不同安卓版本手機(jī)上的兼容性問(wèn)題就困擾著研發(fā)的童鞋們。Cordova使用的web引擎是手機(jī)系統(tǒng)自帶的WebView，兼容性問(wèn)題很多都是安卓不同版本的系統(tǒng)webview的差異導(dǎo)致的，有可能是安卓系統(tǒng)的問(wèn)題，也有可能是手機(jī)廠商修改webkit帶來(lái)的問(wèn)題，這些問(wèn)題從前端技術(shù)層面是很難解決的，修改和測(cè)試成本都非常高。
瀏覽器內(nèi)核介紹
如果細(xì)分的話，目前全球僅有四個(gè)獨(dú)立的瀏覽器內(nèi)核，分別為微軟IE的Trident、網(wǎng)景最初研發(fā)后賣(mài)給Mozilla基金會(huì)并演化成火狐的Gecko、KDE的開(kāi)源內(nèi)核Webkit以及Opera(歐朋)的Presto。其中，Presto是歷史最悠久的內(nèi)核。
整體歸納下幾種內(nèi)核的優(yōu)缺點(diǎn)吧：
1.Trident:因?yàn)樵谠缙贗E占有大量的市場(chǎng)份額，所以以前有很多網(wǎng)頁(yè)是根據(jù)這個(gè)Trident的標(biāo)準(zhǔn)來(lái)編寫(xiě)的，但是實(shí)際上這個(gè)內(nèi)核對(duì)真正的網(wǎng)頁(yè)標(biāo)準(zhǔn)支持不是很好，同時(shí)存在許多安全Bug。
2.Gecko:優(yōu)點(diǎn)就是功能強(qiáng)大、豐富，可以支持很多復(fù)雜網(wǎng)頁(yè)效果和瀏覽器擴(kuò)展接口，缺點(diǎn)是消耗很多的資源，比如內(nèi)存。
3.Webkit:優(yōu)點(diǎn)就是Webkit擁有清晰的源碼結(jié)構(gòu)、極快的渲染速度，缺點(diǎn)是對(duì)網(wǎng)頁(yè)代碼的兼容性較低，會(huì)使一些編寫(xiě)不標(biāo)準(zhǔn)的網(wǎng)頁(yè)無(wú)法正確顯示。
4.Presto：Presto內(nèi)核被稱為公認(rèn)的瀏覽網(wǎng)頁(yè)速度最快的內(nèi)核，同時(shí)也是處理JS腳本最兼容的內(nèi)核，能在Windows、Mac及Linux操作系統(tǒng)下完美運(yùn)行。
移動(dòng)端瀏覽器
目前微軟的Trident在移動(dòng)終端上主要為WP系統(tǒng)內(nèi)置瀏覽器，Webkit內(nèi)核的適用范圍則較為廣泛，Android原生瀏覽器、蘋(píng)果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit開(kāi)源內(nèi)核開(kāi)發(fā)的。
目前，移動(dòng)設(shè)備瀏覽器上常用的內(nèi)核有Webkit，Blink，Trident，Gecko等，其中iPhone和iPad等蘋(píng)果iOS平臺(tái)主要是WebKit，Android 4.4之前的Android系統(tǒng)瀏覽器內(nèi)核是WebKit，Android4.4系統(tǒng)瀏覽器切換到了Chromium(內(nèi)核是Webkit的分支Blink)，Windows Phone 8系統(tǒng)瀏覽器內(nèi)核是Trident。
從實(shí)際情況出發(fā)：
對(duì)于Android手機(jī)而言，使用率最高的就是Webkit內(nèi)核，我們看到很多手機(jī)瀏覽器廠商都宣稱有著自主內(nèi)核，比如手機(jī)UC就號(hào)稱采用了U3內(nèi)核、而華為也經(jīng)常標(biāo)榜自己的天天瀏覽器采用了T9內(nèi)核，事實(shí)上，他們都是基于開(kāi)源內(nèi)核Webkit進(jìn)行二次開(kāi)發(fā)的，并不是完全的自主內(nèi)核。
而在iOS以及WP7平臺(tái)上，由于系統(tǒng)封閉，不允許除系統(tǒng)自帶瀏覽器內(nèi)核以外的瀏覽器內(nèi)核進(jìn)入，因此各家瀏覽器的開(kāi)發(fā)均為在Safari或者IE內(nèi)核的基礎(chǔ)上進(jìn)行二次開(kāi)發(fā)，優(yōu)化功能和自制UI。
微信6.1版本以上的android用戶，都是使用的QQ瀏覽器的X5內(nèi)核。5.4-6.1之間的版本，若用戶安裝了QQ瀏覽器就是使用的X5內(nèi)核，若用戶未安裝瀏覽器，使用的是系統(tǒng)內(nèi)核。
QQ瀏覽器的X5內(nèi)核基于 Blink內(nèi)核
cordova應(yīng)用內(nèi)核
Cordova(PhoneGap)，作為第三方的HTML5應(yīng)用開(kāi)發(fā)框架工具的代表，極大促進(jìn)了HTML5應(yīng)用的發(fā)展。它提供了方便的跨平臺(tái)應(yīng)用打包/發(fā)布服務(wù)、實(shí)用的API、靈活的擴(kuò)展機(jī)制、以及積累下來(lái)的豐富的第三方API實(shí)現(xiàn)。然而Cordova使用的web引擎是系統(tǒng)的WebView。如果開(kāi)發(fā)者正在使用Cordova并且渴望更好的性能和更新的功能，如WebGL，更換內(nèi)核是個(gè)不錯(cuò)的選擇。
終極解決方案
通過(guò)使用統(tǒng)一webkit內(nèi)核的大招來(lái)解決，目前有2個(gè)方案可選，使用Crosswalk內(nèi)核 或 騰訊瀏覽服務(wù)X5內(nèi)核。
1.Crosswalk內(nèi)核
熟悉Cordova生態(tài)圈的朋友可能聽(tīng)說(shuō)過(guò)Crosswalk，[Crosswalk]是Intel維護(hù)的Webkit開(kāi)源項(xiàng)目，可以通過(guò)插件安裝命令安裝，是一個(gè)很好的選擇。
$ cordova plugin add cordova-plugin-crosswalk-webview
Crosswalk支持開(kāi)發(fā)者在Cordova中用Crosswalk替換原生的Android WebView，并將兩者完美的融合。當(dāng)然，它仍然支持Crodova的擴(kuò)展機(jī)制，不過(guò)如果web應(yīng)用對(duì)擴(kuò)展的性能要求較高， 采用Crosswalk自帶的擴(kuò)展機(jī)制是更好的選擇。
它的缺點(diǎn)就是太大了，集成后apk會(huì)增加20M，在安裝后會(huì)解壓縮到100M+，首次安裝還需要解壓縮時(shí)間，造成的用戶體驗(yàn)甚是不好。一系列的問(wèn)題就跟著來(lái)了，解壓縮需要時(shí)間，如果操作快了，或者CPU性能不行，打開(kāi)Hybrid頁(yè)面就會(huì)出現(xiàn)Application Error等問(wèn)題。還有些機(jī)型如魅族，安裝Crosswalk后，就會(huì)Crash，讓研發(fā)的童鞋更是摸不著頭腦。
不過(guò)在我做過(guò)的兩個(gè)app中，確實(shí)是通過(guò)Crosswalk解決了一些魅族和華為的問(wèn)題，也出現(xiàn)過(guò)報(bào)錯(cuò)App打開(kāi)失?。ㄖ怀霈F(xiàn)過(guò)一次）
2.騰訊瀏覽服務(wù)X5內(nèi)核。
騰訊瀏覽服務(wù)X5,它是直接使用微信/手機(jī)QQ/空間的X5瀏覽器內(nèi)核的，SDK只有250k，因此可以放心使用。鑒于這幾個(gè)產(chǎn)品國(guó)內(nèi)廣泛的裝機(jī)量，用戶覆蓋方面不用擔(dān)心，如果微信/手機(jī)QQ/空間都沒(méi)有安裝，會(huì)自動(dòng)降級(jí)到系統(tǒng)瀏覽器內(nèi)核，或提示用戶安裝X5內(nèi)核。
X5SDK是通過(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)。
同時(shí)，QQ瀏覽器團(tuán)隊(duì)還將持續(xù)更新和優(yōu)化X5內(nèi)核，持續(xù)優(yōu)化功能，并保證兼容各種web新特性。
其相對(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)題
Add this plugin
$ cordova plugin add cordova-plugin-x5-webview
Build
$ cordova build android
