https://www.sohu.com/a/300797677_753266

原生页面

优势：

依托操作系统，交互性最强，性能最好。

1）运行速度比较快

2）使用设备的底层功能，如摄像头、方向、重力传感器、拨号、GPS、语音、短信、蓝牙等

3）在界面设计、功能模块、操作逻辑等层面相较web更易做到App的便捷性和舒适性，功能更加强大

4）节省流量

劣势：

1）不同的操作系统（android 和ios）需要独立的进行开发，使用各自的开发包、开发工具和控件

2）每次有更新，都需要重新打包发布到平台，向各个商店进行提交审核。

3）开发成本比较高

H5页面

优势：

1）运行在浏览器上，只需要开发一次便可以在不同的操作系统上显示

2）迭代版本，不需要打包便可以发布（实时更新、快速迭代），与云端实现实时数据交互

3）开发成本低，浏览器适配简单，发布门槛较低

4）无需下载，打开网址就能访问。

劣势：

1）每次打开，都得重新加载获取数据

2）过于依赖网络，速度无法保证，在弱网环境下，不但耗费流量，且加载缓慢。

3）只能使用有限的底层功能

4）仍处于发展阶段，部分功能无法在基于现有技术的浏览器基础上实现。

h5测试要点

1.业务逻辑

a.业务功能  

b.登录   

如果客户端已登录，进入h5依然可登录

如果客户端未登录，进入h5，如果需要登录需要拉起登录，如果取消登录，是否可以再次拉起登录。

c.翻页  

数据分页加载时，注意后续页面请求是否正确。快速操作是否发出去对应请求（页数是不是一次递增，如果第一页尚未loading出来）

d.刷新与返回  

下拉刷新是否处于当前页面

用户主动点击刷新按钮还是处于当前页面

返回是否是期望页面

e数据的请求与返回

提交数据是否正确到达后台管理。

2）h5适配相关

H5的适配其实比客户端的相对来说，要少一些，手机品牌之间的差异不大，所以不用太多关注，最容易出现问题的是android2.3系统。

A、大屏（如720*1280，重点关注页面背景是否完全撑开页面，刷新是否有抖动）、小屏手机（如320*480，重点关注下弹框样式和文案折行）

B、android2.3、android4.X随机找一个即可

C、ios5、ios6、ios7

D、浏览器上也要能够进行完美展示

安卓 ios 浏览器

3）体验相关

页面滑动  加载 自适应 弱网提示

3.1 资源相关

A、页面中有图片的话，淘宝那边建议图片一般不大于50kb，本着一个原则，尽量缩小图片。

B、资源是否压缩、是否通过CDN加载。---CDN是什么？---就近地区访问，服务速度会更快。

C、如何保证二次发布后有效更新。

D、对于类似公司名称、offer名称长度的问题，在手机上最好能根据屏幕大小自适应而不是截断，因为手机上是不会有tips可以看的。

截断导致大屏幕下也只能显示几个字，交互不好

3.2 流量

A、对于一些不会变化的图片，如游戏动画效果相关图片，不需要每次都请求的东西，做本地缓存。

B、数据较多时是否做了分页加载。

3.3 页面展现时间

A、关注页面首屏加载时间。

3.4 页面提示

A、弱网络下，数据加载较慢，是否有对应的loading提示

B、接口获取异常时，提示是否友好。

C、刷新页面或者加载新内容时页面是否有抖动。

3.5 手机操作相关

A、锁屏之后展示页面。

B、回退到后台之后，重新呼出在前台展示。

C、手指滑动是否流畅，手指点击时焦点是否定位正确，不同机型会不一样。焦点地位后点击是否灵敏。

3.6 弱网络体验

https://www.cnblogs.com/wanghaihong200/p/9128286.html

h5和原生的区别：

1、原生的页面运行速度快，比较流畅。

H5页面相对原生的运行性能低，特别是一些动画效果有明显卡顿。

2、H5页面的很多交互都没有原生的好，比如弹层、输入时候的页面滑动 等。H5的效果相对比较low，没有原生的好看，也没有原生默认的动画等效果。

3、原生APP修改页面要重新发布，等待审核（现在iOS的审核速度已经提高到1天到2天）。

H5页面的修改 可以随时上线，不用等待审核。

4、H5跨平台，iOS和android需要各自开发。相对原生，H5开发成本低。

5、原生APP能很好的使用设备底层功能，如摄像头、方向传感器、重力传感器等。H5有所限制。

比如android里的H5对摄像头和方向传感器就需要再多做一些处理。再比如你不想用系统默认的手机相册样式，就要用原生来开发了。

6、H5过度依赖于网络，网络不好的时候卡到不行，并且刚打开看到的都是一个空白页面。

默认的H5页面每次打开都会重新请求页面（可以做缓存，不过基本很少有做的）。

H5比原生更费流量，H5除了加载html还要加载js、css这些资源文件，相比原生网络加载速度慢。

h5和原生的什么时候用：

1、核心需求 要用原生，比如淘宝里的产品详情页、订单页、支付页等。

非核心需求 可以考虑用H5，遇到功能调整，可以快速发布。比如淘宝首页的特色好货、热门市场等栏目 需要经常变动，用H5来做比较灵活。

2、阶段性的营销活动页面，特别是功能、布局等经常需要修改的需求，可以用H5来做。比如节日的有奖活动页面，经常需要调整，用H5做会更灵活。

APP原生和H5页面如何分辨

1、android手机可以修改设置：  设置—》开发者选项—》显示布局边界（Show layout bounds） 。

这样就能看到控件的布局了，如果包含图片、文字等信息的一整块区域只有一个边框，应该就是H5实现的。

iOS在真机上没有这个选项。一般开发人员可以 用mac上的Reveal软件 来查看APP的布局，或者用网络抓包来分析是否为H5页面。

2、新打开页面，如果页面是个空页面，基本就是H5页面。原生的页面一般都会有一些控件提前放在页面中。

如果空页面 上拉还有大块黑色的背景，就是H5页面，不过现在很多开发人员已经做了优化，不会显示黑色的大色斑。

3、关闭网络后，如果是整个的空白页，这个基本就是H5页面。如何页面还有控件基本就是原生的。

4、下拉刷新的时候H5会有一个明显的刷新现象，比如闪现、导航栏标题消失等。

原生的下拉刷新没有明显现象，很平滑。

5、如果开发人员没有禁用掉WebView的长按手势，会弹出一个系统默认的快捷菜单：拷贝、查询、添加、分享。这个页面就是H5页面。

6、如果打开一个页面顶部有个进度条，就是H5页面。当然很多H5页面也没有加进度条。

7、页面的底部导航  在上拉的时候 如果跟着一起滚动，就是H5页面。

8、H5弹框、页面跳转等和原生的效果都不一样，可以仔细看下。

9、H5页面点击 输入框，弹出的键盘上面一般都有“完成”按钮，原生的没有。