如何判断页面问题是否与 H5 容器相关

背景

在 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