html5+css3方式实现mobie app的一些瓶颈

PC的早期阶段,也是传统的C/S模式居多,后进化到B/S模式,并产生了SaaS、云计算等概念和应用。从客户端进化到浏览器最大好处是客户端无需更新,减少了大量的更新成本,只需服务器端进行更新。这也是为什么现在流行webQQ, google docs, photoshop网页版的原因。现在同时很多软件厂商也在制作他们的web版本,国内的一些ERP厂商也开始了这条道路。iPhone、android的巨大成功揭开了移动互联网的大幕,互联网企业都想在移动互联网的的巨大市场中分得一杯羹。游戏、sns、微博、视频、本地生活服务都在大力发展移动互联网,推出了自己的app。

  mobie native app指使用手机官方提供的SDK和开发语言开发的手机客户端软件,它能够很好的使用手机提供的一些接口来操作手机的软硬件资源。随着html5和css3的流行和webkit对html5和css3的较好支持,很多人开始使用html5和css3来制作mobie app。如前所述,使用web方式制作mobie app最大的好处是,客户端无需更新,并且数据显示很多手机用户不是经常更新他的app程序,同时相对于native app,web方式修改app的界面的成本更低一些。所以说,对于对界面的灵活性有较高要求的app,比较倾向于用web方式实现mobie app。

  android和iphone都提供了webview的控件,这个控件实质是一个webkit浏览器内核,用于解析html、css、js代码。所以,native app可以调用webview空间来展示我们的web页面。同时,由于对css3的较好支持,native那种绚丽的界面就可以用html+css较好的实现出来,达到逼真的native app的效果。

  但是,web实现mobie app有一些瓶颈。以下是我在项目实战中碰到的,如果各位看官有好的解决方案,请不吝赐教。

  其一,根据百度移动互联网发展趋势报告2010Q4,iphone下下载一个1.407k的网页,建立连接耗时1.35s左右,传输耗时0.15s左右。这样,导致app在建立连接的时候,屏幕处于白屏状态。也就是说这个app在一秒多的时间内,完全处于白屏状态,再加上3G、GPRS网络的不稳定,有时候等待app响应需要几秒甚至1几秒的时间,这对于速度就是生命的mobie app来说,无疑是个致命的缺陷。

  其二,有人说,native app也需要建立tcp连接,同样需要耗时这么长时间。很对,那么目前常用的解决方案是什么呢。开机画面+loading图片,有了这两个,程序不会处于假死状态,用户拥有耐心继续等待。那么,web app是否也能这样做呢。首先,程序打开同样显示开机画面,画面结束后切换界面(webview),webview如果无loading图片依然是在建立连接,依然处于白屏状态。因为我们无法在开机画面的时间内对程序进行预加载。然后,使用native方式在webview外面蒙上一层,上面放上loading图片,但是webview没有提供web页面开始渲染的接口,指提供了web页面load完成的接口。也就是说,如果通过native方式在webview上放置一个loading图片的话,那么这个图片指能在页面完全加载完消失,这样也会影响用户体验。这里再提供一种方式,实现这种loading图片的效果:放置一个静态页面在本地,点击打开静态页面,无需建立连接。而后通过ajax方式请求数据来替换页面内容。这种方式,也是Nokia widget的实现方式,但是这种方式的效率比较低下。

  其三,难以实现本地存储。本地存储是html5的一个重要成果之一,但是,基于android存在多版本系统。android低版本中的webkit对html5和css3支持的并不好。简单的两个例子是:input type="number"会导致低版本android的webkit直接crash,css3的圆角在低版本的android webkit中也会出现明显裂缝。现在常用的html5向后兼容方案是通过javascript+css+html来模拟html5的一些特性,但过多的js存在于mobie app中会不会得不偿失。

  个人觉得,移动互联网的发展趋势一定也是从C/S模式向B/S模式转变。但面临的困难就是,手机端的浏览器更多,对web标准的支持也不尽相同,适配各种分辨率的手机屏幕也是让人很崩溃的一件事情。相信以后的移动互联网也将适应现在的格局:web方式浏览信息,app方式游戏,工具等。

时间: 2024-10-27 10:12:34

html5+css3方式实现mobie app的一些瓶颈的相关文章

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H

慕课网实战—《用组件方式开发 Web App全站 》笔记五-折线图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 折现图绘制大致步骤 折线图画布 JavaScript CSS 折线图绘制网格线 // 水平网格线 100份 -> 10份 var step = 10; ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = '#AAAAAA'; window.ctx = c

慕课网实战—《用组件方式开发 Web App全站 》笔记七-饼图和环图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 饼图开发(绘制饼图准备) 饼图实现原理 饼图开发(绘制饼图) 代码 /* 饼图组件对象 */ var H5ComponentPie =function ( name, cfg ) { var component = new H5ComponentBase( name ,cfg ); // 绘制网格线 - 背景层 v

慕课网实战—《用组件方式开发 Web App全站 》笔记四-柱状图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 柱图开发思路 水平柱图开发(HTML的DOM搭建) ???? ???? 水平柱图开发(CSS样式编写) /* 柱状组件样式 */ .h5_component_bar{ } .h5_component_bar .line{ height: 15px; font-size: 12px; line-height: 15p

慕课网实战—《用组件方式开发 Web App全站 》笔记二

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 项目JS类开发 静态页思路验证 jQuery全屏滚动插件fullPage.js ??使用参考:Fullpage入门指南 组件切换,入场,出场动画 ???? DOM事件循环传播-无限循环 ??使用return false;或者triggerHander()方法阻止事件向上传播. 相关代码 HTML <body&

响应式HTML5+CSS3 网站开发测试实践

仅仅利用media query适配样式是远远不够的,并没有考虑触屏下的行为和特有的内容组织方式的不同.简单在桌面版基础上叠加mobile版的代码,会带来请求增多.流量.性能.代码冗余等诸多方面问题.有统计说86%的手机站看起来small其实体积比桌面版还大. 我们这次充分发挥“响应”的灵活性,实现one web. 响应式开发就为了实现one web: 1. 响应性的模块原本网站的模块化程度越高越便于做响应性开发.一个page例如是这样组织的:<%include file=”path/mod1.h

【JavaScript】HTML5/CSS3实现五彩进度条应用

今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS中的进度值,让进度条实时动起来.具体效果大家可以看演示. 你也可以在这里查看在线演示 接下来我们来分析一下这款进度条的源代码以及实现思路,代码主要由HTML和CSS组成,如果你需要动态改变进度值,也可以自己添加Javascript代码,也是比较简单的. HTML代码: <section class=

HTML5&CSS3初学者指南(1) – 编写第一行代码

介绍 网络时代已经到来.现在对人们来说,每天上网冲浪已经成为一种最为常见的行为. 在网页浏览器中输入一段文本地址,就像http://www.codeproject.com,等待一下,网页就加载到浏览器窗口中.一个典型的网页是由文本.图像和链接组成的.除去内容上的差异,不同网站的网页也具有不同的外观和感受,以实现在网络上建立自己的身份品牌的目的. 如果你也曾想要了解你屏幕上的这些网页是如何被创建出并以各式各样的方式渲染的,那么这里正是你可以了解到这些知识的地方.让我们一起走进在浏览器中创建了这么多