背景

蘑菇街是一個(gè)專門為女性購物打造的時(shí)尚購物平臺，App端承接了大量的流量，及時(shí)發(fā)布新內(nèi)容成為一個(gè)挑戰(zhàn)。在保證平臺穩(wěn)定性和迅速更新的前提下，我們選擇了native和h5的混合開發(fā)，并對其不斷的進(jìn)行了優(yōu)化迭代。

方案

內(nèi)核選擇

• 由于安卓碎片化嚴(yán)重，webview 性能不一，初期我們選擇編譯打包 crosswalk 項(xiàng)目提供的容器內(nèi)核進(jìn)行動態(tài)加載，在 app 空閑的時(shí)候，下載此內(nèi)核，并在下載完成后，動態(tài)加載到系統(tǒng)中。在 web 容器啟動的時(shí)候判斷相應(yīng)的版本號以及文件完整性，選擇性的加載兩種內(nèi)核。數(shù)據(jù)表明，在安卓4.4及以下機(jī)型上，crosswalk 的性能有很大的優(yōu)勢。

• 在這個(gè)環(huán)節(jié)，比較重要的是要提高內(nèi)核下載的到達(dá)率，解決用戶網(wǎng)絡(luò)連接斷開，或者應(yīng)用被殺死，進(jìn)程中斷，文件完整性的問題。我們做了大量工作，通過判斷網(wǎng)絡(luò)情況，文件下載結(jié)果的驗(yàn)證，防止出現(xiàn)下載死循環(huán)，導(dǎo)致用戶手機(jī)內(nèi)存爆炸的問題。最終到達(dá)率在95%以上。

能力擴(kuò)展

• web 天生就有動態(tài)的特性，但在 native 端也有其不足的地方。就是他的權(quán)限不足，無法訪問 native 的一些系統(tǒng)功能，比如添加日歷，訪問通訊錄等。這些在電商應(yīng)用中都是常見的需求。由于這個(gè)問題，我們提供了統(tǒng)一的內(nèi)核訪問 api ，然后接入 Cordova 。Cordova是一個(gè)能讓 JavaScript 訪問原生設(shè)備功能，如攝像頭、麥克風(fēng)等的庫。

• Cordova原理探究：通過繼承WebChromeClient類，復(fù)寫 onJsPrompt 方法,在其中通過CordovaBridge類，橋接到自己的功能點(diǎn)，通過自己定義好的協(xié)議，實(shí)現(xiàn)對應(yīng)的功能。Cordova的一個(gè)強(qiáng)大的地方，就是他有插件機(jī)制，業(yè)務(wù)方可以很容易的擴(kuò)展插件，js調(diào)用native回非常方便，只要繼承一下CordovaPlugin類，在execute方法中執(zhí)行自己的邏輯即可。

• 結(jié)合難點(diǎn)

  • 由于我們封裝了自己的內(nèi)核，而且是采用自己定制的一套接口，就不能直接使用Cordova官方倉庫提供的已經(jīng)封裝好的 SystemWebview 類，所以需要深入了解他的一些邏輯，才能進(jìn)行調(diào)用，否則會遇到深坑。
  • 調(diào)試需要結(jié)合js一起進(jìn)行，在前端有一個(gè) deviceready 事件會傳遞到native端，如果調(diào)用時(shí)機(jī)錯誤，Cordova 就會加載失敗，從而導(dǎo)致傳遞給橋接類的秘鑰錯誤，調(diào)用直接失敗。
  • 我們自己的內(nèi)核封裝不完善，有一些方法實(shí)現(xiàn)不一致，有些方法沒有。此時(shí)需要去看源碼類似的地方，進(jìn)行調(diào)用嘗試。

數(shù)據(jù)分析

既然使用了多種內(nèi)核，就要對不同的內(nèi)核進(jìn)行數(shù)據(jù)分析。在客戶端進(jìn)行對應(yīng)的性能打點(diǎn)，在數(shù)據(jù)平臺上通過 sql 語句進(jìn)行數(shù)據(jù)清洗，并每天定時(shí)生成。利用 Reactjs 開發(fā)了數(shù)據(jù)展示的前端界面，每天可以查看昨日的內(nèi)核分布，機(jī)型占比，性能對比等數(shù)據(jù)，為內(nèi)核的性能保證提供數(shù)據(jù)支撐。

問題

• 兼容性問題。經(jīng)常會有前端同學(xué)來問在某些機(jī)型上面是好的，在另外一個(gè)機(jī)器上就不行。此類問題通常是因?yàn)楦鱾€(gè)設(shè)備不兼容導(dǎo)致的，各大應(yīng)用廠商都會對系統(tǒng)進(jìn)行一些定制，導(dǎo)致問題百出。由于各個(gè)版本的 webview 存在兼容性問題，后來我們又接入了騰訊的 x5 內(nèi)核。
• 安卓系統(tǒng)不斷的更新演進(jìn)，舊的內(nèi)核越來越少，webview 性能都顯著提高，我們自己的內(nèi)核面臨下架的問題。最終在2016年12月，將 crosswalk 的內(nèi)核下載停掉。
• crosswalk 另一個(gè)問題是存在硬件加速問題，他使用的是 surfaceview ，在低端機(jī)型上，很容易內(nèi)存不夠，被系統(tǒng)殺掉。

總結(jié)

整個(gè)項(xiàng)目包含的內(nèi)容不只文字所能術(shù)完，在此期間，同事們和我都做了很多努力，在保證功能的前提下，不斷的做優(yōu)化，提升性能，最終將蘑菇街的頁面加載速度提升到秒級。