背景

在 H5 App 的開發過程中，開發者可能會遇到各種前端問題，如渲染問題、卡頓或其他前端異常情況。因為 H5 App 是在 mPaaS 容器中加載的，所以需要界定這類問題是否與容器相關。

處理方法

iOS 平臺

當前 mPaaS iOS 平臺上的容器是基于 WKWebView 實現的（60 基線之后，并配置啟用 WKWebView），可以通過如下方法確認前端問題是否與容器相關：

1. 簡化前端復現問題的代碼和邏輯，盡量在一個較為簡單的 HTML 頁面上復現問題。

2. 通過容器加載該頁面（離線 或 在線 頁面），確認問題是否可以重現。

3. 另構造一個原生 iOS 應用，并通過原生 WKWebView 加載相同的頁面，查看是否可以重現問題：

   • 如果可以重現問題，則有以下三種可能：

     • 前端代碼本身存在問題。

     • WKWebView 自身存在問題。

     • 前端代碼和 WKWebView 存在兼容問題。

   • 如果無法重現問題，則考慮可能與 mPaaS 容器相關配置相關，建議搜索群號 41708565 加入釘釘群進行咨詢技術支持，并提供復現問題用的 HTML 文件。

Android 平臺

在 Android 平臺上，開發者可以選擇使用基于 UC 瀏覽器內核或原生瀏覽器內核的容器，可以通過如下方法確認前端問題是否與容器相關：

1. 簡化前端復現問題的代碼和邏輯，盡量在一個較為簡單的 HTML 頁面上復現問題。

2. 通過 UC 內核容器加載該頁面（離線 或 在線 頁面），確認問題是否可以重現。

3. 通過原生瀏覽器內核的容器加載該頁面（離線 或 在線 頁面），確認問題是否可以重現。

4. 另構造一個原生 Android 應用，并通過原生 WebView 加載相同的頁面，確認問題是否可以重現。

通過上述測試的組合，開發者可以確認問題是否來自 UC 內核、原生內核、容器或前端本身。

JsAPI 相關問題

JsAPI 作為 mPaaS 容器的特性之一，如果問題和 JsAPI 相關，則不方便通過原生 WebView 進行驗證。

建議首先從前端觀察，剝離 JsAPI 相關內容后，是否依然存在問題。

• 如果存在，則當成普通前端問題對待。

• 如果問題和 JsAPI 耦合度高，則建議簡化 JsAPI 后再做進一步排查。

離線包頁面的處理

對于離線包內的頁面，如果需要驗證是否存在問題，可以提取出該頁面的 fallback url，通過 WebView 加載 fallback 頁面來快速驗證問題。

• fallback base url 位于離線包配置文件 H5_json.json 中。

• fallback base url + 頁面相對地址即為某個頁面的 fallback url。如下圖： 則直接通過如下地址加載頁面：https://mcube-prod.oss-cn-hangzhou.aliyuncs.com/7E3C5B0121415-beimo/20190003/1.xx.xx.2_all/nebula/fallback/www/index.html