目前绝大多数App都是混合开发模式，同时包含原生页面和H5页面。两种页面的运行机制不同，产生的bug类型、测试侧重点也完全不一样。很多测试新手容易漏测问题，本文用通俗简单的方式，讲清二者区别和H5页面专属测试重点。
一、什么是原生页面、H5页面？
1. App原生页面
页面代码打包在App安装包内，依托手机系统原生控件渲染，是真正的客户端页面，稳定性和流畅度更高。
2. App内H5页面
本质是网页，嵌套在App的WebView容器中运行，页面资源在线加载，无需升级App就能更新页面内容，迭代更灵活。
二、原生页面 vs H5页面 核心区别
用最直白的维度对比，快速理清差异：
1. 加载方式
原生：本地加载，打开速度快； H5：在线加载，依赖网络拉取资源。
2. 网络依赖
原生：断网也能展示页面框架，仅接口数据为空； H5：弱网、断网极易出现白屏、加载失败。
3. 更新方式
原生：必须打包、升级App才能更新页面； H5：服务端更新，用户无需升级App，即时生效。
4. 运行稳定性
原生：系统适配成熟，卡顿、崩溃问题少； H5：受手机厂商WebView内核影响，兼容问题多。
5. 常见bug类型
原生：逻辑错误、布局适配、空指针闪退； H5：白屏、样式错乱、滚动异常、桥接调用失败。
三、H5页面专属核心测试重点
H5除了基础业务功能测试，重点关注原生页面没有的专项场景：
1. 多网络场景测试（重中之重）
测试正常网、弱网、断网、网络切换场景，校验页面加载、超时提示、断网重试、资源加载失败展示，避免白屏、卡死问题。
2. 全机型兼容适配
不同品牌手机的WebView内核差异大，易出现样式错乱、文字溢出。需测试横竖屏切换、系统字体放大、深色/浅色模式下的页面展示效果。
3. JS桥接原生能力测试
H5无法直接调用手机硬件能力，需通过桥接调用App原生功能。重点测试拍照、相册、扫码、分享、定位、权限授权/拒绝等场景，避免功能调用失效。
4. 页面返回与栈逻辑
H5存在「原生页面栈+H5页面栈」双层栈，需重点测试物理返回键、页面层层返回、退出页面逻辑，避免返回错乱、卡死、误关闭App。
5. 专属交互问题
重点规避H5经典问题：滚动穿透、软键盘遮挡输入框、滑动卡顿、点击区域失效等交互异常。
6. 缓存状态测试
H5有独立的网页缓存，需测试清除App缓存、后台挂起、重启App后，页面数据、登录态、样式是否正常，无旧资源残留。
四、总结
1. 原生页面侧重：业务逻辑、功能稳定性、基础适配； 2. H5页面侧重：网络兼容、机型适配、桥接交互、页面栈、缓存、交互细节； 3. 混合App测试，需重点关注原生与H5页面交替跳转、状态互通的联动场景。