混合APP 優化加速方案

文/田江濤

1 現有方案的問題

混合APP 現有技術主要存在著如下的缺陷：

每次訪問應用都需要重新請求下載整個HTML5 網頁、CSS 樣式、JavaScript 腳本、圖片及視頻等資源，但是如果服務器端沒有更新資源，那么每次請求和返回的資源都會相同，這不僅造成了網絡流量的浪費，占用了大量的服務端資源，而且下載資源往往有網絡延遲從而影響了用戶體驗和感知。

當請求訪問新頁面時需要等待資源下載后，混合APP 才能解析資源后再加載展示，可能等待時間較長。

2 優化方案

本方案提出了一種混合APP 加速方法和裝置，主要思路是對混合APP 所需的HTML5網頁、CSS 樣式、JavaScript 腳本等文件資源全部進行模版化，所有需要動態更新數據的部分均以占位符替代，混合APP 新增內置的模版解析模塊，自動按模版對文件資源進行解析并使用最新數據替換。服務端計算并記錄所有模版文件資源的唯一散列值標識，供比對是否是最新文件時使用，如果文件內容有更新，則散列值改變。混合APP 中新增加速渲染引擎模塊，首次請求訪問時，下載并緩存整個HTML5 網 頁、CSS 樣 式、JavaScript 腳 本、圖片及視頻等資源，再次訪問時首先檢查本地是否有文件資源緩存，如果有則計算文件資源散列值，并與服務端文件資源散列值對比，若散列值一致則直接從本地加載并解析文件，即提供本地Web 服務，不再從服務端下載文件，僅從服務端獲取數據，并調用混合APP內置模版解析模塊將占位符替換數據再加載到WebView 展示給用戶，服務端由傳統的提供文件下載解析服務的角色轉變為本方案的提供數據服務的角色，這樣再次訪問時可以避免文件資源下載耗費大量的時間，如果不存在文件資源或因服務端Web 版本更新出現散列值不一致，則從服務端下載最新文件資源后重復上述過程進行加載展示。

混合APP 加速方法和裝置的工作流程如下：

步驟1 用戶在移動終端啟動混合APP 首次訪問HTML5 網頁等資源，加速渲染引擎模塊檢測到本地沒有緩存資源，從服務端下載并緩存整個HTML5 網頁、CSS 樣式、JavaScript腳本、圖片及視頻等資源，并記錄資源散列值。

步驟2 混合APP 模版解析模塊對文件資源按照預定規則進行解析，將其中的占位符替換為具體數據內容并寫入文件。

步驟3 混合APP 從本地加載解析后的文件通過WebView 等控件展示給用戶。

步驟4 用戶再次訪問混合APP 的HTML5網頁等資源，加速渲染引擎模塊檢測到本地存在緩存資源，獲取資源散列值，然后詢問服務端對應資源的散列值，如果散列值一致，說明文件資源沒有更新，可以直接從本地讀取模版并獲取服務端數據內容后加載顯示，否則下載新的文件資源，更新記錄資源的散列值。

步驟5 如果用戶手工刪除本地緩存資源，則重新從服務端獲取文件資源和數據，重復上述步驟。

步驟6 用戶訪問結束，退出混合APP，否則訪問新資源。

3 結語

對混合APP 所需的HTML5 網頁、CSS樣式、JavaScript 腳本等文件資源全部進行模版化，所有需要動態更新數據的部分均以占位符替代，混合APP 新增內置的模版解析模塊，自動按模版對文件資源進行解析并使用最新數據替換。服務端計算并記錄所有模版文件資源的唯一散列值標識，供比對是否是最新文件時使用，如果文件內容有更新，則散列值改變。以上是本方案的技術創新，應予以保護。

混合APP 中新增加速渲染引擎模塊，首次請求訪問時，下載并緩存整個HTML5 網頁、CSS 樣式、JavaScript 腳本、圖片及視頻等資源，再次訪問時首先檢查本地是否有文件資源緩存，如果有則計算文件資源散列值，并與服務端文件資源散列值對比，若散列值一致則直接從本地加載并解析文件，即提供本地Web 服務，不再從服務端下載文件，僅從服務端獲取數據，并調用混合APP 內置模版解析模塊將占位符替換數據再加載到WebView 展示給用戶，服務端由傳統的提供文件下載解析服務的角色轉變為本方案的提供數據服務的角色，這樣再次訪問時可以避免文件資源下載耗費大量的時間，如果不存在文件資源或因服務端Web版本更新出現散列值不一致，則從服務端下載最新文件資源后重復上述過程進行加載展示。