本文作者：劉文濤
原創宣告：本文為閱文前端團隊 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