本文作者：劉文濤

原創(chuàng)聲明：本文為閱文前端團(tuán)隊(duì) YFE 成員出品，請(qǐng)尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)聯(lián)系公眾號(hào) (id: yuewen_YFE) 獲取授權(quán)，并注明作者、出處和鏈接。

今年年初我司開(kāi)啟了起點(diǎn)品牌的海外之旅，名為「 Webnovel 」。

目前 PC / M站 / App 三端都在快速的迭代中。而其中起點(diǎn)海外版 App 是基于 Hybird 技術(shù)進(jìn)行開(kāi)發(fā)的。作為起點(diǎn)海外 Hybird App 中內(nèi)嵌頁(yè)的前端開(kāi)發(fā)，從 1.0.0 版本的陌生，到最近發(fā)布的 2.0.0 版本的嫻熟，海外版內(nèi)嵌頁(yè)的開(kāi)發(fā)方式一直都在改進(jìn)，力求最大程度的接近 Native App 的頁(yè)面性能和用戶體驗(yàn)。

在開(kāi)始講解起點(diǎn)海外版 App 中內(nèi)嵌頁(yè)的具體實(shí)現(xiàn)以及優(yōu)化之前，讓我們先來(lái)了解下整個(gè) Hybird App 實(shí)現(xiàn)的具體方案。

一、Hybrid App 實(shí)現(xiàn)方案

1. 什么是 Hybrid App ？

Hybrid App（混合模式移動(dòng)應(yīng)用）是指介于 WebApp 、Native-App 這兩者之間的 App，兼具「 Native App 良好用戶交互體驗(yàn)的優(yōu)勢(shì) 」和「 Web App 跨平臺(tái)開(kāi)發(fā)的優(yōu)勢(shì) 」。

2. 為什么選擇 Hybrid App

Web 實(shí)現(xiàn)相對(duì)簡(jiǎn)單，一套代碼，兩端兼容；

產(chǎn)品還在快速迭代，變數(shù)大，而 Native App 開(kāi)發(fā)，成本偏高；

Web 開(kāi)發(fā)時(shí)間較短，減少成本，可以應(yīng)付產(chǎn)品的快速迭代；

Hybrid App 的開(kāi)發(fā)方式在公司其他項(xiàng)目上已經(jīng)有了很好的運(yùn)用，技術(shù)方案已有沉淀；

以上幾點(diǎn)，是促使海外版 App 使用 Hybird 模式進(jìn)行開(kāi)發(fā)的主要原因。

二、整體架構(gòu)

1. Hybird 實(shí)現(xiàn)方案

Hybird App 是使用 iOS 原生 、 Andoird 原生 、Web 頁(yè)面 「 內(nèi)置于 App 中的頁(yè)面，既內(nèi)嵌頁(yè) 」一起實(shí)現(xiàn)的方式進(jìn)行開(kāi)發(fā)。

2. 完整的SDK工具

離線包：Web 頁(yè)面資源以離線包的形式內(nèi)嵌在 App 本地存儲(chǔ)中。當(dāng)訪問(wèn)頁(yè)面的時(shí)候，WebView 對(duì)于本地存儲(chǔ)的資源無(wú)須額外發(fā)起的網(wǎng)絡(luò)請(qǐng)求，直接讀取。而剩下的請(qǐng)求中，就只剩下 Ajax 拉取的 Json 動(dòng)態(tài)數(shù)據(jù)，和渲染這部分?jǐn)?shù)據(jù)時(shí)攜帶的圖片資源，以及一些必要的埋點(diǎn)請(qǐng)求。這使 Web 頁(yè)面即是在弱網(wǎng)的情況下也可以很快的打開(kāi)；

完善的JSSDK：使用 JSSDK 與 App 進(jìn)行交互，透明且跨平臺(tái)地使用客戶端的能力，形成交互閉環(huán)，給用戶良好的交互體驗(yàn)；

離線包打包工具：自動(dòng)化打包工具能快速的產(chǎn)出離線包。沒(méi)有了人工干預(yù)，App 離線包正確性也能得以保證；

完善的熱更新機(jī)制：App 客戶端監(jiān)測(cè)到離線包更新之后，客戶端靜默更新（用戶無(wú)感知），解決了 Native App 頁(yè)面不能補(bǔ)丁更新，只能發(fā)版修復(fù) Bug 的問(wèn)題；

3. 完善的后臺(tái)系統(tǒng)平臺(tái)

一鍵打包：內(nèi)嵌頁(yè)離線包打包工具可視化，實(shí)現(xiàn)一鍵打包產(chǎn)出離線包；

降級(jí)融災(zāi)：快速回退至之前版本，如有問(wèn)題，快速下線新版本功能；

數(shù)據(jù)采集：完善的數(shù)據(jù)采集平臺(tái)，通過(guò)數(shù)據(jù)分析優(yōu)化用戶體驗(yàn)；

灰度更新：支持根據(jù)配置進(jìn)行灰度更新；

持續(xù)集成：系統(tǒng)平臺(tái)目前還在持續(xù)集成當(dāng)中，為提供更好的開(kāi)發(fā)流程；

三、內(nèi)嵌頁(yè)的優(yōu)化

我們起點(diǎn)海外 App 大部分頁(yè)面都采用 Hybird 實(shí)現(xiàn)的，對(duì)于最大程度的接近 Native App 的頁(yè)面性能和用戶體驗(yàn)這兩個(gè)點(diǎn)，我著重講解下面兩個(gè)部分：

內(nèi)嵌頁(yè)全局優(yōu)化－接口頁(yè)面并行加載；

詳情頁(yè)加載優(yōu)化－ localStorage ；

1. 內(nèi)嵌頁(yè)全局優(yōu)化－接口頁(yè)面并行加載

之前內(nèi)嵌頁(yè)的開(kāi)發(fā)方式，是在 JS 中發(fā)出 Ajax 請(qǐng)求拉取數(shù)據(jù)，然后使用模版引擎拼接模版，插入到頁(yè)面中，再由 WebView 進(jìn)行頁(yè)面渲染。

從上圖我們可以看到，雖然頁(yè)面很快就有了占位顯示，但是整個(gè)操作是串行的，需要等到 Ajax 數(shù)據(jù)返回之后才能看到頁(yè)面。而這個(gè)從 WebView 到發(fā)起 Ajax 請(qǐng)求之間的時(shí)間是被浪費(fèi)掉了的。

如果當(dāng) WebView 啟動(dòng)的時(shí)候就能發(fā)送當(dāng)前頁(yè)面的 Ajax 請(qǐng)求，我們的數(shù)據(jù)就可以提前拿到了，而這樣從啟動(dòng) WebView 到 Ajax 發(fā)請(qǐng)求的之間的空閑時(shí)間，就被我們利用上了。此時(shí)上面的流程就變成了如下的樣子：

當(dāng) WebView 啟動(dòng)的時(shí)候，App 根據(jù) Url 地址獲取相應(yīng)的 Ajax 請(qǐng)求的地址，從而提前發(fā)出請(qǐng)求，等到頁(yè)面本身請(qǐng)求發(fā)出的時(shí)候，攔截 Ajax 并判斷是否是已經(jīng)提前請(qǐng)求過(guò)的數(shù)據(jù)。如果是則基于提前請(qǐng)求的 Ajax 返回的數(shù)據(jù)渲染頁(yè)面，如果不是則繼續(xù)發(fā)送 Ajax，等到數(shù)據(jù)返回之后，再進(jìn)行頁(yè)面渲染。

上述做法，我們充分利用了 App WebView 的啟動(dòng)到 Ajax 發(fā)送獲取數(shù)據(jù)之間的時(shí)間。接口請(qǐng)求與頁(yè)面并行加載，加快了頁(yè)面顯示。

根據(jù)上組數(shù)據(jù)我們會(huì)發(fā)現(xiàn)頁(yè)面顯示的平均時(shí)間幾乎快了 300ms 。在不影響頁(yè)面正常加載流程的情況下，把串行操作變成并行操作，充分利用空余時(shí)間，大大縮短內(nèi)嵌頁(yè)白屏?xí)r間，讓用戶更快的看到了我們起點(diǎn)海外 App 的頁(yè)面內(nèi)容，效果顯著。

2. 詳情頁(yè)加載優(yōu)化－ localStorage

采用接口與頁(yè)面資源并行加載的方式，使內(nèi)嵌頁(yè)呈現(xiàn)的速度快了很多，但是由于海外用戶區(qū)域廣泛，接口加載時(shí)長(zhǎng)的不確定，頁(yè)面還是會(huì)有白屏的情況，接下來(lái)我們要做的就是特定頁(yè)面，特殊處理。

再整個(gè)起點(diǎn)海外 App 頁(yè)面中，詳情頁(yè)訪問(wèn)量相對(duì)較大，也是整個(gè)站點(diǎn)中比較重要的頁(yè)面，所以其頁(yè)面呈現(xiàn)的速度至關(guān)重要。因此本次迭代我們主要針對(duì)詳情頁(yè)做了特殊處理。

首先，我們先分析一下詳情頁(yè)的業(yè)務(wù)形態(tài)。書(shū)詳情頁(yè)數(shù)據(jù)相對(duì)比較穩(wěn)定，并不會(huì)頻繁變化，但接口數(shù)據(jù)返回需要時(shí)間，那我們是不是可以讓書(shū)詳情頁(yè)的數(shù)據(jù)先本地存儲(chǔ)，以求達(dá)到快速顯示的效果，并同時(shí)發(fā)出 Ajax 接口，等到數(shù)據(jù)返回時(shí)再糾正頁(yè)面上舊的數(shù)據(jù)。

關(guān)于本地存儲(chǔ)，我們引入 localStorage 來(lái)進(jìn)行本地存儲(chǔ)，原因如下：

localStorage 可以存儲(chǔ)的數(shù)據(jù)容量大；

localStorage 屬于永久性存儲(chǔ)；

localStorage 目前移動(dòng)端瀏覽器支持度良好；

從上圖我們可以看到，當(dāng)用戶第一次訪問(wèn)書(shū)詳情頁(yè)時(shí)，localStorage 中沒(méi)有相應(yīng)書(shū)籍?dāng)?shù)據(jù)頁(yè)面按正常邏輯顯示，但這時(shí)我們會(huì)把這份數(shù)據(jù)緩存到 localStorage 中。當(dāng)用戶第二次訪問(wèn)同一本書(shū)的詳情頁(yè)時(shí)，我們根據(jù) bookId 的 Key 值在 localStorage 中快速找到相應(yīng)書(shū)詳情頁(yè)信息數(shù)據(jù)，并基于該緩存數(shù)據(jù)拼接模版，渲染頁(yè)面。同時(shí)繼續(xù)發(fā)出 Ajax 請(qǐng)求，待數(shù)據(jù)返回時(shí)，與 localStorage 的數(shù)據(jù)基于 Diff 算法進(jìn)行對(duì)比。如果數(shù)據(jù)一致，則不做任何處理，不一致則頁(yè)面基于新數(shù)據(jù)重新渲染，并且更新 localStorage 中的數(shù)據(jù)為新的 Ajax 返回?cái)?shù)據(jù)。具體效果對(duì)比圖如下，左邊是未做二次加速的，右邊是使用了二次加速的效果：

可以看到頁(yè)面第一次展示的時(shí)候，依然能夠明顯看到占位圖，但是當(dāng)頁(yè)面二次打開(kāi)就直接呈現(xiàn)，效果很明顯。

結(jié)尾～～

做了半年多的 Hybird 頁(yè)面的前端開(kāi)發(fā)，針對(duì)海外版 App 做了很多的優(yōu)化，為的是給用戶帶來(lái)更好的體驗(yàn)。但對(duì)于 Hybird 技術(shù)自身的瓶頸，我們也無(wú)能為力。所以目前我們團(tuán)隊(duì)在嘗試從 Hybird 到 React Native 的技術(shù)轉(zhuǎn)型，以求能夠在用戶體驗(yàn)上更進(jìn)一步。

同樣延續(xù)上一次的分享：一個(gè)細(xì)節(jié)的優(yōu)化是可以決定產(chǎn)品的好壞的，良好的用戶體驗(yàn)，會(huì)吸引跟多的用戶，獲得更多的稱贊。

以下是起點(diǎn)海外版的訪問(wèn)地址，請(qǐng)使勁戳戳戳～～～?

起點(diǎn)海外版 App下載：
請(qǐng)前往 Google play ／ App Store [ 美區(qū) ] 下載

起點(diǎn)海外版web站：
https://www.webnovel.com

起點(diǎn)海外版m站：
https://m.webnovel.com

更多分享，請(qǐng)關(guān)注YFE:

總結(jié)

以上是生活随笔為你收集整理的起点海外版 Hybrid App－内嵌页优化实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。