您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

HTML 5 应用的用户体验能达到本地应用那么好吗?

2024/11/22 5:11:12发布27次查看
我是指用 html 5做成 web 应用或打包成本地应用两种情况下
回复内容:先举两个案例:
1. shiu:html5 打造的离线 web book(app),请用 iphone 测试 [1]
2. flipboard 的 web 仿造版 [2]
html5 可以(或者说有潜力)在用户体验上达到本地应用的__平均水准__。
这主要得益于 webkit 带来的竞争,标准「军备」翻了一翻:
- css animation, gpu acceleration
- javascript/dom api improved, e.g. file api
- offline storage
但是 html5 应用最大的问题(瓶颈所在)却还没有「标准地」解决:
- 性能
- os 交互
虽然 v8 引起的性能竞争很激烈,但终究也只是 js engine,html5 可不是一个 js 快了就完事的玩意。
比如 dom repaint & reflow、css animation 都不是低需求的主。
gpu acceleration 实现也还不是「标准」,各有各的情况。
这里举两个例子:twitter & http://icloud.com。
twitter 网页版体验上看上去挺接近本地应用的(除了 online 外),但是在 chrome 下占用内存可以轻易超 100mb,最多时 800mb(似乎是 chrome bug 引起),长时间运行会影响系统效能。
而 echofon 在长时间运行后,始终保持在 100mb 以下,cpu 也不会高。
http://icloud.com 在 ui 和功能上都往本地应用看齐,比如 calendar。但遗憾的是,在我的 mbp 374 里,卡顿感明显,比如双击后停顿 .5s~1.5s 才弹出添加事件的窗口。并且内存占用达到了 438mb。
至于 os 交互,你懂的。
因此 html5 的体验可以达到本地应用的__平均水准__,再往上就需要看平台、设备,对开发者的水平也挺看重。
html5 应用更多是看运行的平台,比如背后用 cocoa、界面用 webview 呈现,比如豆瓣出品的 onering,比如针对 chrome/webkit 的离线应用。
所以建议你们在考虑「html5 体验行不行」时,先考虑:
- html5 开发成本 v.s. 本地应用开发成本(比如团队学习成本)
- 核心需求是否能通过 html5 实现(比如 ui animation 是不是很多)
- 核心用户的平台(比如中国 win 用户)
- ......
如果目标群体设备的性能都比较理想,html5 是不错的。
另外,上面都是谈普通应用,游戏的话,html5 是很好的平台,会有更好的表现。
----
- [1] https://github.com/alswl/shiu
- [2] http://tympanus.net/development/flipboardpagelayout/?page=0取决于你的应用类型,你需要大量的特效和动画,或者调用很多系统资源比如摄像头的话,html5不是个好选择。否则的话问题不大。
当然这并不是说html5只能开发简单朴素的应用,从google的动态doodle和g+其实可以看出html5的能力。
使用html5需要前端对浏览器性能和差异的了解很深,才能保证整体效果。要解决响应速度问题,开发中可以使用适当分页面加载,或者先响应动作,再加载数据或者直接预加载数据的方式解决,只不过对前端代码的要求就更高了。对于html5的效果和效率讨论详细在很长时间内都是一个无法回避的话题。下面从几个方面来谈谈我的看法。
首先,随着硬件和系统的不断升级,一些以前很头疼的效率和效果都能得到解决,比如在android2.3时代的页面展现,由于使用的是android browser而不是
chrome,有很对webkit特有的特性都不支持,如输入框的边框显示,css的遮罩效果,一些css特效动画等都不能实现。从效率上页面渲染的速度也比较慢,主要原因
应该还是dom占用内存很多导致。而目前的主流手机都已经是2g甚至4g内存+,并且大都配置了android 4.x(关键是4.4版本)了,浏览器默认都是chrome了,上述问题可以说
基本得到了解决。因此我想说的是,当我们把目光放远一些,会发现html5是很诱人并且确实是很现实的选择了。
然后谈一下做一款html5应用的体会和经验吧,对于html5和原生的优劣比较这里不多说了,已经有了很多很好的论述,我从实际开发的角度说一下有哪些可以优化的地方。
1 网络连接优化:应该说网络连接优化是最可控的,这个能达到和原生应用完全一致的体验。原因很简单,html5应用里面所有的html页面,css,js,图片等,我们都
可以打到安装包中,用户安装完毕后,打开的页面都是本地页面,不需要连网,只有产生业务数据时,才使用ajax进行数据请求。而对于网络情况的判断,对于连接超时的
设置等,js或者说xhr规范都支持了。
2 数据本地存储:主流浏览器对于local storage的支持没有问题,可以保证本地存储的实现。当然,这个存储是key-value模式的,需要在应用中对于存储的数据进行
一定的设计,比如用json存储实际数据,而对于这些数据的检索,目前也已经有了不少json query的支持库了。当然chrome也支持sql lite,不过个人对于这种方式
不推荐,毕竟在客户端上我们不需要太复杂的sql查询。
3 文件本地存储:在原生应用中很多文件我们都需要下载到本地,比如音视频,图片等,html5应用一样,如果是纯html模式那么目前我们可选择的就只有chrome的
file system了,当这个选择会有一些限制,比如需要用户同意本地存储的策略,另外file system的存储路径与物理路径没有直接关联,这个对于应用的调试和管理
也会产生障碍。因此这里还是推荐使用原生插件的模式,利用原生文件系统做这个事情,比如cordova的file transfer插件。
4 音视频的播放:html5的插件可以满足需求
5 动画效果:html5 canvas以及css3的各种动画特效都能满足需要。
6 录音录像:chrome的webrtc可以实现,但是在手机上的效果一般,还是建议使用原生的插件或者自定义插件实现。
7 页面展现和排列:这个确实效率比原生应用有一定差距,尤其是滚动和页面内容比较多的时候。这就需要应用在渲染的时候进行优化,比如限制展现区域,比如在定义
点击区域时尽量使用tap而不是click,并且最好减少对于大区域的点击事件.....
最后介绍一款使用html5实现的安卓应用:),ok外语宝,一款英语学习的安卓应用,使用cordova框架实现的html5与原生混合型应用,
里面的html5实现了动画,音视频,语音录制,语音识别,本地文件和数据存储,网络同步等多个html5特性的使用。在各大应用市场都可以下载这款应用(应用宝市场:http://android.app.qq.com/myapp/detail.htm?apkname=com.okappclient)。而且还有一个特色是这个应用真正实现了原生与html5的同步,即所有的安卓应用功能都能在网页上同步呈现。用chrome浏览器访问web.okkouyu.com,你会发现里面的内容与手机上安装的功能完全一致。先不说别的,webapp顶部一个bar,浏览器上面又算一个bar,看起来都是怪怪的。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product