Hybrid的一些理解

Posted by Bibibi Blog on August 6, 2015

hybrid是混合的意思,在ios这边就是h5页面和native的混合。

Native
  • 优点:

原生动画流畅,用户体验好。

  • 缺点:

更新需要和发包一起,速度慢。

开发成本较高。

h5
  • 优点:

更新快,无需客户端发包。

  • 缺点:

没有原生的控件可以使用,动画效果不好。

基于dom的渲染速度较慢,也会使页面不流畅。

hybrid

目标:流畅的动画,随时可以更新。

实现原理:h5是由html页面,css,js,本地资源,服务器资源构成的,只需要把除了服务器资源以外的内容缓存在本地,加载h5页面时直接加载缓存内容,然后去取服务端资源,就可以避免由于下载资源缓慢造成的不流畅。

实现步骤:

  1. 发包时或者平时从后台下载好由 html页面,css,js,本地资源 等文件。
  2. 加载h5页面时,从本地加载html,并调用本地的css和js。
  3. 动态数据内容由js调用native再调用服务端接口,最后返回js,进行数据展示。
结论

也可以注册部分的native控件到js,加强体验,如果需要所有的原生控件都能通过js调用,并摆脱webview,可以参考facebook开源的reactive-native