盲猜你不懂H5架构和原生架构的区别

前言

1. App 的 3 种开发方式

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

2. 原生架构

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

原生架构特点：

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

3. H5 架构

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

H5 架构特点：

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

4.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 这些资源文件，相比原生网络加载速度慢。