HTML5 和原生开发的未来

        HTML5 技术（简称 H5）在移动互联网研发中的应用越来越广泛，很多人甚至认为可以使用 H5技术代替原生的 Andoid 和 IOS 开发，从而大幅度提高研发速度、降低研发成本。那么，目前的实际情况到底是怎么样呢？

1.概念
        HTML5： 一个基于浏览器的协作标准，可以让不同的素材在浏览器中运行，它的最大优点在于跨平台运行、易开发性、成本低、开发速度快、更新及时等。开发 HTML5 需要用到 HTML、CSS 、Javacript 和一些其它开发框架，如 Vue、Angular 等。
        Native（原生开发）:也叫 Native App，是基于目前的智能手机操作系统(如安卓 Android、苹
果 iOS、windows phone 等)的基础上，基于系统语言编写运行的第三方移动应用程序。
        按操作系统区分:
        Android(安卓),使用 Java 语言
        iOS(苹果),使用 Objective-C,Swift 语言
        其它系统，C,C# ,C++等语言
        对于 native app， 需要不同的语言来完成多个 APP 的开发，需要的人力和物力理论上会成倍
增长。

        H5 的运行是依赖于原生应用的 webview 引擎容器的(可以理解为开发中的一个控件)，它是显示在容器中，如同网页需要在手机上的浏览器显示一样，没有浏览器网页也无法显示，而浏览器本身就是一个原生应用。
        H5 和原生都可以开发手机应用，它们之间有什么关系呢？只用 H5 不用原生能开发出 APP 吗？只用原生不用 H5 开发出的应用能更高效吗？实际的项目中我们应该如何去做取舍呢？下面我们从不同层面分析下 H5 开发和原生开发的关系。

二．用户角度
        一款 APP 展现给用户的时候，用户最关心的就是通过方便的操作完成想要的功能，对用户来说他们是不知道也不会关心应用是 H5 还是原生 Native 实现的，对用户来说就是体验，体验好了用户可能才会继续留下使用你的应用。实际的开发过程中是用 H5 还是 Native 呢？这就涉及到应用本身的内容、业务和其它因素。

三．开发过程
下面从开发的角度介绍开发中用 H5 与原生的比较。

1. 普通页面，列表和详情
        基本大部分的应用都有很多页面，有些应用也包含大量的列表以及列表详情页。如京东上有一个产品列表页，用户从列表中选择一个产品进入详情后，详情页有产品标题、规格、描述、图片等，产品详情页样式很多，变化性又多，这种情况的产品详情页用 H5 实现比原生的效率会更高，因为产品详情页 UI 布局复杂，原生实现困难。而产品列表页有大量数据甚至几十万，用户通过下拉上拉加载数据，如果使用 H5 会导致手机内存激增，甚至卡顿，产品加载速度会不如原生。同时 H5 也会遇到不同平台的兼容性，就拿 Android 来说，还牵扯到不同厂家的定制系统手机，遇到问题 H5 程序调试起来也不方便，之前做的项目的朋友圈是用 H5 实现的，前段时间也遇到了部分手机用户无法加载出朋友圈的情况，也是花了很久时间解决的。所以用原生实现大数据列表的加载从性能和开发效率上比 H5 更高效些。目前国内比较大的电商如京东，淘宝等，它们的产品也都是原生和 H5 结合用。

2. 动画
        如果应用需要用到动画效果，如侧滑，页面切换转场等效果，原生动画要比 H5 动画效果好
些。有些低端些的安卓手机动画效果显示要更差些，甚至有卡屏现象，同时要更耗电。

3. 页面切换
        现在的应用有很多的页面，单页的应用很少见了，大家也都体验过手机浏览器上浏览腾讯新闻，多个页面之间的跳转返回等操作，效果不如应用上的原生页面切换流畅。

4. 网络
        APP 跟服务端数据交互时，如果 H5 页面放在服务端是比较消耗流量的。而使用原生可以对数据进行压缩处理，同时还能缓存数据。
        H5 的请求数据的速度不如原生快。
        H5 开发比较依赖网络，如果网络不好的话，是不能加载出页面数据的，只能显示出一个空白页面,这对用户是一个不好的体验。如果要对网络不好的情况做操作，如显示进度条，显示无网络的操作，也需要依赖原生代码来实现。

5. 离线缓存模式
        有些应用需要做缓存模式，当网络不好的时候，给用户展现一些离线数据,特别是一些新闻类的应用。H5 对手机端的缓存支持不是很好，特别是大数据量。如前公司做的某项目的手机开门功能需要在没有网络的时候也能进行开门，需要把首页数据缓存到本地，当没有网络的时候，显示出缓存的数据，从而保证用户在信号不好的时候，如进入地下室等也能进行正常开门。如果首页用 H5 实现(先不考虑其它因素)，web 的 localStorage 目前可以缓存 5M，如果数据量超过此限制，将不能缓存，需要 H5 和原生交互，通过让原生去缓存大数据量；当网络不好的时候，还需要 H5 和原生交互从原生获取缓存数据进行显示，这样的编写代码操作比直接用原生要繁琐些。

6. 硬件设备使用
        有些应用需要用到蓝牙、GPS、拍照、视频、重力传感器等功能，H5 只能使用有限的功能，有些功能 H5 实现的不是很好，同时也有很多兼容问题。

        拿拍照来说，H5 拍出来的照片如果需要进行显示、剪裁等效果处理,会比直接用原生性能差很多。现在的很多方案也是页面用 H5 显示,拍照功能调用原生，原生处理后传给 H5 显示。

        之前做的项目的手机开门功能用到了蓝牙开门，这个功能由于用到了蓝牙功能，供应商是不提供 H5的接口的，只能原生去开发。应用中如果用到了硬件功能，取决于提供的 SDK 是否支持 H5，如果没有提供 H5 SDK,应用中的某些 H5 页面用到了该硬件功能,可以通过 H5 调用原生，原生操作硬件的SDK 来间接操作。

7. 消息推送
        现在的很多 APP 都有消息推送功能。H5 并不支持消息推送的处理，如果应用需要消息推送功能，还是需要进行原生开发。消息推送是手机独有的功能。

8. 分享功能
        在原生开发中，分享功能能够帮助将应用信息，特定 H5 页面分享到不同平台，甚至可以做
到在第三方平台直接使用，且支持分享到多个平台，如微信分享。在 H5 中仅可以在第三方平台
内部流通，这也是很多 H5 开发没有分享功能的原因。

9. 安全性
        安全是很多应用都要考虑的问题。在一些登录注册，忘记密码，银行卡充值等业务操作中都有短信功能，为了业务安全一般都做了信息防刷新。用原生开发接口一般不会暴露，短信被刷风险很小；H5 开发，接口会暴露，短信被刷风险要大一些。实际开发中需要综合考虑进行选取。

10.应用更新
        原生开发的应用，如果功能有更新，需要重新发布新版，上传到商店还需要审核，还有被拒绝的风险，成本会相对较高。而如果只是 H5 的更新，应用是不需要发版本的，实施更新，这是 H5 的优势。

四.人员成本
        假如有一个项目，需要 1 个后端，1 个 UI 设计师，1 个产品经理，如果用 Native,需要 1 个
Android，1 个 iOS， 而用 H5 需要 1 个人。比较下来少 1 个人。但是 iOS ,Android 的打包发布，
部分代码编写也还是需要原生去完成的，这个工作谁去做呢，要么招聘 1 个新的人去做，要么就从现有的后端、前端、H5、或者产品经理中去兼职做这个事情，这样算下来，人员并没有减少。实际项目中，当项目任务少的时候，H5 和原生的人员是区别不出来的，而当项目任务多的时候，很多功能用 H5 实现，H5 开发相对于原生开发，人员优势会体现出来。
        综上所述，H5 与原生的主要区别在于应用的技术平台不同，Native App 能更好的适应各种类型的功能，性能要好于 H5,H5 能实现的原生都可以实现,原生能实现的功能，H5 不一定能实现。而 H5的优势在于它的更新及时性，它的排版，要做出相同效果的 Native 界面成本也很大。
        在实际项目中，如何去选择原生和 H5 呢，这个需要结合项目、产品、用户体验、人力成本去综合考虑。如果你的应用就是一些简单的页面，类似微信小程序，“用完即走”，对网络要求不高，也不需要缓存，也不需要硬件功能，不要求用户体验，需要快速开发，需要用到的功能 H5 都能实现的，可以考虑 H5。如果用 H5 去开发，也需要原生的支持，毕竟 H5 的显示是需要原生作为依赖的。反之亦然。
        但实际的项目中，很少有纯 H5 开发的应用，纯 H5 开发的应用相当于一个单独 web 页面，有些应用商店如苹果商店审核是不被允许的。为了兼顾开发效率和性能，市场上出现了很多移动 web框架，如 Codova、APICloud 、React Native 等等，这些框架使用原生和 H5 相结合的方式，H5实现不了的或者 H5 实现性能不好的用原生实现，通过 H5 调用原生的交互方式，从而达到一个平衡。当然，这种方式也会带来很多不可控的新问题，本文就不再赘述。
        所以目前的移动开发,不能简单的说是用 H5 或原生，混合开发才是未来的趋势（但不排除哪一天浏览器的功能很强大，强大到和原生一样，目前看还没有）。混合开发的目的是集 H5 和原生的优势，化解各自的劣势，来开发出更好的 APP 给用户。目前很多 APP 的研发，都是采用这种混合开发的模式，取得了良好的效果。