native html5 区别,H5与Native优劣对比

即将启动爱奇艺商城(mall.iqiyi.com)移动端的native化。

项目开始之前当然要梳理下为什么做native，究竟H5跟native比有什么劣势，而H5又为什么占比那么高并且有“Html5才是未来”的说法呢。下面简单理下对比。

H5，即Html5，指第5代HTML，更严格说，是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。。。好了不深入扣它的定义，比较重要的，只要理解两点：a HTML5的设计目的是为了在移动设备上支持多媒体 b. HTML5手机应用的最大优势就是可以在网页上直接调试和修改

那么H5相对于app究竟有什么优点：

1. 跨平台性与可移植性

任意H5站点与应用都可以兼容PC端与移动端、Windows与Linux、安卓与IOS。可以轻易地移植到各种不同的开放平台、应用平台上，打破各自为政的局面。这种强大的兼容性可以显著地降低开发与运营成本，可以让企业特别是创业者获得更多的发展机遇

2. 轻量迅捷

H5应用和网页无需下载占用存储空间，特别适合新一代移动媒体(微信等开放平台)。

3. 快速迭代

H5可以自由安排版本，无需"上架”，迭代速度快，非常适合互联网敏捷开发模式特别适合小型创业团队；

然而H5相对于原生应用，缺点也很明显(否则怎么还会有app store的存在呢哈哈)

H5缺点：

用户体验大幅落后于native，主要有以下几点体现：

a) 操作的流畅度H5低于native

如我们的H5有时候打开速度慢，有时候按钮样式加载出来了，点不了，总之就是给人感觉“有点卡””好慢”

b) H5渲染效果比不上native

简单说，就是有时候页面看上去总是丑丑的跟UI设计总有一点偏差，这一点大家看看我们的社区或者其他现有页面应该有点这种感觉

c) H5的程序的执行效率低

页面有时候打不开，有些控件有时候加载不出来，容易出bug。比如线上发现频道的一些bug，native的话有控件调用出现概率低很多

d) H5受网速的影响较大

在网络情况较差的情况下，H5往往连打开都困难，而native程序，基本都能顺利打开运行，就算网速差也只是速度较慢。直观地看，就是网络差的情况下，加载慢页面空白或者很丑

e) H5的功能受浏览器的限制大

部分用户想要的功能，因为浏览器不支持，或者是数据接口问题，导致无法实现。比如我们的视频播放置顶、内嵌视频直接播放功能H5无法实现。

以上是H5对比native的几大缺陷，如果native了，会解决以上问题，同时还有一些交互会更友好，比如返回(右滑手势)会整个商城关闭返回主站首页的不好体验也会解决。

但是native也有本身的缺点，这个可以简单概括：迭代慢，需要走上架审核流程(从电商角度看要配合主站版本，就是不再自己干自己的)；需要分安卓、iOS，别的小众系统直接可能就放弃了，整体开发维护成本比原来高，而且H5还得照做；新版不能全量覆盖(需要用户更新App)

好了，以上就是一个应用的H5与native优劣对比。作为一个产品经理，如果摆在面前是两个方案，需要你做决策，来，究竟做H5呢，还是做成native，这时候心里就比较有底了吧。

native html5 区别,H5与Native优劣对比相关推荐

H5与native有啥区别？
app测试,H5与native有啥区别? native是使用原生系统内核的,相当于直接在系统上操作.是我们传统意义上的软件,更加稳定. 但是H5的APP先得调用系统的浏览器内核,相当于是在网页中进行操 ...
Flutter介绍 - Flutter,H5,React Native之间的对比
Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在iOS和Android平台. 它使用Dart语言进行开发,并且最终编译成各个平台的Nat ...
h5 和native 交互那些事儿
前端菜菜一枚,写下关于h5 和native 交互那些事情.偏前端,各种理论知识,不在赘述.之前有各位大牛已经写过.我只写代码,有问题,下面留言 /* 关于h5 和native 之间的交互 JSBrid ...
android与h5交互设计,H5与native交互之JSBridge
JSBridge 1. Why do we need JSBridge? 2. Why is "JS"Bridge? 3. What is JSBridge? Why do ...
Android内部h5和native交互实现方式
Android具体实现方式一.实现方式 a.h5调用native: Android实现h5到native的方式为截获h5调用的特定url,一般url都是http://**这种,为了能够捕获h5调用的 ...
H5与Native交互之JSBridge技术
一.原理篇下面分别介绍IOS和Android与Javascript的底层交互原理 IOS 在讲解原理之前,首先来了解下iOS的UIWebView组件,先来看一下苹果官方的介绍: You can us ...
【quickhybrid】H5和Native交互原理
前言 Hybrid架构的核心就是JSBridge交互,而实现这个交互的前提是弄清楚H5和Native端的交互本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理 (之前 ...
H5与Native交互之JSBridge技术 1
做过混合开发的很多人都知道Ionic和PhoneGap之类的框架,这些框架在web基础上包了一层Native,然后通过Bridge技术使得js可以调用视频.位置.音频等功能.本文就是介绍这层Bridg ...
浅谈HTML5和H5区别
什么是HTML5? HTML5 是定义 HTML 标准的最新的版本. HTML5是一个新版本的HTML语言,具有新的元素,属性和行为 HTML5和H5的区别? HTML5:当前最新版本的超文本标记语言 ...

native html5 区别,H5与Native优劣对比

native html5 区别,H5与Native优劣对比相关推荐

最新文章

热门文章