本文作者：劉文濤

原創聲明：本文為閱文前端團隊 YFE 成員出品，請尊重原創，轉載請聯系公眾號 (id: yuewen_YFE) 獲取授權，并注明作者、出處和鏈接。

今年年初我司開啟了起點品牌的海外之旅，名為「 Webnovel 」。

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

在開始講解起點海外版 App 中內嵌頁的具體實現以及優化之前，讓我們先來了解下整個 Hybird App 實現的具體方案。

一、Hybrid App 實現方案

1. 什么是 Hybrid App ？

Hybrid App（混合模式移動應用）是指介于 WebApp 、Native-App 這兩者之間的 App，兼具「 Native App 良好用戶交互體驗的優勢 」和「 Web App 跨平臺開發的優勢 」。

2. 為什么選擇 Hybrid App

Web 實現相對簡單，一套代碼，兩端兼容；

產品還在快速迭代，變數大，而 Native App 開發，成本偏高；

Web 開發時間較短，減少成本，可以應付產品的快速迭代；

Hybrid App 的開發方式在公司其他項目上已經有了很好的運用，技術方案已有沉淀；

以上幾點，是促使海外版 App 使用 Hybird 模式進行開發的主要原因。

二、整體架構

1. Hybird 實現方案

Hybird App 是使用 iOS 原生 、 Andoird 原生 、Web 頁面 「 內置于 App 中的頁面，既內嵌頁 」一起實現的方式進行開發。

2. 完整的SDK工具

離線包：Web 頁面資源以離線包的形式內嵌在 App 本地存儲中。當訪問頁面的時候，WebView 對于本地存儲的資源無須額外發起的網絡請求，直接讀取。而剩下的請求中，就只剩下 Ajax 拉取的 Json 動態數據，和渲染這部分數據時攜帶的圖片資源，以及一些必要的埋點請求。這使 Web 頁面即是在弱網的情況下也可以很快的打開；

完善的JSSDK：使用 JSSDK 與 App 進行交互，透明且跨平臺地使用客戶端的能力，形成交互閉環，給用戶良好的交互體驗；

離線包打包工具：自動化打包工具能快速的產出離線包。沒有了人工干預，App 離線包正確性也能得以保證；

完善的熱更新機制：App 客戶端監測到離線包更新之后，客戶端靜默更新（用戶無感知），解決了 Native App 頁面不能補丁更新，只能發版修復 Bug 的問題；

3. 完善的后臺系統平臺

一鍵打包：內嵌頁離線包打包工具可視化，實現一鍵打包產出離線包；

降級融災：快速回退至之前版本，如有問題，快速下線新版本功能；

數據采集：完善的數據采集平臺，通過數據分析優化用戶體驗；

灰度更新：支持根據配置進行灰度更新；

持續集成：系統平臺目前還在持續集成當中，為提供更好的開發流程；

三、內嵌頁的優化

我們起點海外 App 大部分頁面都采用 Hybird 實現的，對于最大程度的接近 Native App 的頁面性能和用戶體驗這兩個點，我著重講解下面兩個部分：

內嵌頁全局優化－接口頁面并行加載；

詳情頁加載優化－ localStorage ；

1. 內嵌頁全局優化－接口頁面并行加載

之前內嵌頁的開發方式，是在 JS 中發出 Ajax 請求拉取數據，然后使用模版引擎拼接模版，插入到頁面中，再由 WebView 進行頁面渲染。

從上圖我們可以看到，雖然頁面很快就有了占位顯示，但是整個操作是串行的，需要等到 Ajax 數據返回之后才能看到頁面。而這個從 WebView 到發起 Ajax 請求之間的時間是被浪費掉了的。

如果當 WebView 啟動的時候就能發送當前頁面的 Ajax 請求，我們的數據就可以提前拿到了，而這樣從啟動 WebView 到 Ajax 發請求的之間的空閑時間，就被我們利用上了。此時上面的流程就變成了如下的樣子：

當 WebView 啟動的時候，App 根據 Url 地址獲取相應的 Ajax 請求的地址，從而提前發出請求，等到頁面本身請求發出的時候，攔截 Ajax 并判斷是否是已經提前請求過的數據。如果是則基于提前請求的 Ajax 返回的數據渲染頁面，如果不是則繼續發送 Ajax，等到數據返回之后，再進行頁面渲染。

上述做法，我們充分利用了 App WebView 的啟動到 Ajax 發送獲取數據之間的時間。接口請求與頁面并行加載，加快了頁面顯示。

根據上組數據我們會發現頁面顯示的平均時間幾乎快了 300ms 。在不影響頁面正常加載流程的情況下，把串行操作變成并行操作，充分利用空余時間，大大縮短內嵌頁白屏時間，讓用戶更快的看到了我們起點海外 App 的頁面內容，效果顯著。

2. 詳情頁加載優化－ localStorage

采用接口與頁面資源并行加載的方式，使內嵌頁呈現的速度快了很多，但是由于海外用戶區域廣泛，接口加載時長的不確定，頁面還是會有白屏的情況，接下來我們要做的就是特定頁面，特殊處理。

再整個起點海外 App 頁面中，詳情頁訪問量相對較大，也是整個站點中比較重要的頁面，所以其頁面呈現的速度至關重要。因此本次迭代我們主要針對詳情頁做了特殊處理。

首先，我們先分析一下詳情頁的業務形態。書詳情頁數據相對比較穩定，并不會頻繁變化，但接口數據返回需要時間，那我們是不是可以讓書詳情頁的數據先本地存儲，以求達到快速顯示的效果，并同時發出 Ajax 接口，等到數據返回時再糾正頁面上舊的數據。

關于本地存儲，我們引入 localStorage 來進行本地存儲，原因如下：

localStorage 可以存儲的數據容量大；

localStorage 屬于永久性存儲；

localStorage 目前移動端瀏覽器支持度良好；

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

可以看到頁面第一次展示的時候，依然能夠明顯看到占位圖，但是當頁面二次打開就直接呈現，效果很明顯。

結尾～～

做了半年多的 Hybird 頁面的前端開發，針對海外版 App 做了很多的優化，為的是給用戶帶來更好的體驗。但對于 Hybird 技術自身的瓶頸，我們也無能為力。所以目前我們團隊在嘗試從 Hybird 到 React Native 的技術轉型，以求能夠在用戶體驗上更進一步。

同樣延續上一次的分享：一個細節的優化是可以決定產品的好壞的，良好的用戶體驗，會吸引跟多的用戶，獲得更多的稱贊。

以下是起點海外版的訪問地址，請使勁戳戳戳～～～?

起點海外版 App下載：
請前往 Google play ／ App Store [ 美區 ] 下載

起點海外版web站：
https://www.webnovel.com

起點海外版m站：
https://m.webnovel.com

更多分享，請關注YFE:

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。