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

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

盲猜你不懂H5架构和原生架构的区别_第1张图片

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. 开发成本高(针对不同的手机操作系统都要进行独立的开发),开发周期长,更新迭代缓慢,上架时需要等待官方审核通过

 盲猜你不懂H5架构和原生架构的区别_第2张图片

 

3. H5 架构

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

H5 架构特点:

  1. 方便测试,只需要输入网址就可以进行测试,是基于浏览器的,可以跨平台使用。

  2. 想要新增功能直接在后台添加即可,不需要通知用户升级。

  3. 量级低,开发成本很低,而且相应的他也不需要安装包。

  4. 对网络非常依赖,一断网就歇菜功能单一,主要用于展示,无法调用底层功能,比如相机。

 

 盲猜你不懂H5架构和原生架构的区别_第3张图片

 

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

 

盲猜你不懂H5架构和原生架构的区别_第4张图片

你可能感兴趣的:(5架构和原生架构的区别)