APP中的 H5和原生页面如何分辨、什么时候使用

1、APP内嵌H5和原生的区别

一、原生的页面运行速度快，比较流畅。
H5页面相对原生的运行性能低，特别是一些动画效果有明显卡顿。

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

三、原生APP修改页面要从新发布，等待审核（如今iOS的审核速度已经提升到1天到2天）。
H5页面的修改 能够随时上线，不用等待审核。

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

五、原生APP能很好的使用设备底层功能，如摄像头、方向传感器、重力传感器等。H5有所限制。
好比android里的H5对摄像头和方向传感器就须要再多作一些处理。再好比你不想用系统默认的手机相册样式，就要用原生来开发了。

六、H5过分依赖于网络，网络很差的时候卡到不行，而且刚打开看到的都是一个空白页面。
默认的H5页面每次打开都会从新请求页面（能够作缓存，不过基本不多有作的）。
H5比原生更费流量，H5除了加载html还要加载js、css这些资源文件，相比原生网络加载速度慢。

2、APP原生和H5页面如何分辨

一、android手机能够修改设置：  设置—》开发者选项—》显示布局边界（Show layout bounds） 。
这样就能看到控件的布局了，若是包含图片、文字等信息的一整块区域只有一个边框，应该就是H5实现的。
iOS在真机上没有这个选项。通常开发人员能够 用mac上的Reveal软件 来查看APP的布局，或者用网络抓包来分析是否为H5页面。

二、新打开页面，若是页面是个空页面，基本就是H5页面。原生的页面通常都会有一些控件提早放在页面中。
若是空页面 上拉还有大块黑色的背景，就是H5页面，不过如今不少开发人员已经作了优化，不会显示黑色的大色斑。

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

四、下拉刷新的时候H5会有一个明显的刷新现象，好比闪现、导航栏标题消失等。
原生的下拉刷新没有明显现象，很平滑。

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

六、若是打开一个页面顶部有个进度条，就是H5页面。固然不少H5页面也没有加进度条。

七、页面的底部导航  在上拉的时候 若是跟着一块儿滚动，就是H5页面。

八、H5弹框、页面跳转等和原生的效果都不同，能够仔细看下。

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

3、APP原生和H5何时使用

一、核心需求 要用原生，好比淘宝里的产品详情页、订单页、支付页等。
非核心需求 能够考虑用H5，遇到功能调整，能够快速发布。好比淘宝首页的特点好货、热门市场等栏目 须要常常变更，用H5来作比较灵活。

二、阶段性的营销活动页面，特别是功能、布局等常常须要修改的需求，能够用H5来作。好比节日的有奖活动页面，常常须要调整，用H5作会更灵活。

4、如今经常使用的方案

一、有四种方式来作APP：Web App（纯Web页面）、Hybrid App（web和原生混合开发）、 Native App（原生APP）、Weex和React Native(用相似js、html来写原生效果的页面)。 二、如今没有所有用H5来作APP的，交互体验太差。 三、Hybrid App 前几年火过，其努力去打造相似于Native App 的体验，但仍受限于技术，网速，等等不少因素。并非很完美。 四、如今不少大公司在尝试用Weex和React Native或者DeviceOne 来实现一些常常改动的页面或者活动营销页面，能够随时发布，交互效果还和原生的同样。其中Weex站在了React Native这个巨人的肩膀上，借鉴并作了更好的尝试，我我的更建议用Weex。