H5架构和原生架构的区别

1.App的3种开发方式

表面上看，手机App都是同样的东西，就是手机上的应用程序，点击图标就能运行，但是它们的底层技术不一样。按照开发技术，App可以分成三大类。原生应用（简称nativeApp），Web应用（简称WebApp），混合应用（简称hybridApp）这三类App的技术模型都不一样，各有优缺点。

2.原生架构

原生应用开发，是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。所以原生架构的App在应用性能上和交互体验上应该是最好的，但是原生应用的可移植性比较差，特别是一款原生的App，Android和IOS都要各自开发，同样的逻辑、界面要写两套。如微信app，既有Android版的，也有ios版的。

原生架构特点：

1. 每一种移动操作系统都需要独立的开发项目。
2. 每种平台都需要独立的开发语言和工具，比如Android系统上的应用是利用java、eclipse、Android studio来进行开发，IOS系统是上的应用则是利用Objective-C和Xcode来进行开发的。
3. 更加贴近底层，因此他的操作更加的流畅，对于调取底层功能也是很容易的，如相机。
4. 开发成本高（针对不同的手机操作系统都要进行独立的开发），开发周期长，更新迭代缓慢，上架时需要等待官方审核通过

3.H5架构

H5开发就是值是利用Web技术（HTML5、JavaScript、CSS）进行的App开发，现在还有一些开发框架可以利用，比如phoneGap、bootstrap、jquery等。H5开发的好处是可以跨平台，编写的代码可以同时在Android、IOS、Windows上进行运行。由于Web技术本身的限制，H5移动应用不能直接访问设备硬件和离线存储，所以在体验和性能上有很大的局限性。

H5架构特点：

1. 方便测试，只需要输入网址就可以进行测试，是基于浏览器的，可以跨平台使用。
2. 想要新增功能直接在后台添加即可，不需要通知用户升级。
3. 量级低，开发成本很低，而且相应的他也不需要安装包。
4. 对网络非常依赖，一断网就歇菜功能单一，主要用于展示，无法调用底层功能，比如相机。

4.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页面每次打开都会重新请求页面（可以做缓存，不过基本很少有做的）。

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