找回密码
 注册
搜索
查看: 2384|回复: 1

[讨论] 使用Rexsee实现移动应用中缓存加速和预加载、JS注入、页面过渡动画

[复制链接]
发表于 2011-12-16 20:10:44 | 显示全部楼层 |阅读模式
如果大家接触过HTML5的离线存储的话,那么大家会知道,HTML5具有离线访问动态页面的功能,做法也比较简单,编写test.manifest文件,罗列出要储存的页面和元素,并在页面HTML标签中引入。但是大家会发现在PC上屡试不爽的离线存储在rexsee中却无法工作。

原因很简单,因为缓存被清除了。而HTML离线存储所应用的正式缓存技术。所以,我们只需要设置一下缓存就OK了。
rexseeApplication.setAutoClearCache(false);
这样设置后,缓存就不会被清除了。HTML5离线存储work!
设置缓存的方法很早就出现了,而且被广泛应用于各大网站,相信为什么这么做因为不用我来说明,HTML5的离线存储带给了我们更多的方便,更使得程序对网络的依赖性进一步降低。

当然,前人的经验我们借鉴。但又怎能缺少自己的方法呢。为了更进一步优化我们的程序,我们还需要用到2个对象,预加载和页面过渡动画。

首先,我们需要先了解一下开发手机应用和传统WEB开发的区别。就手机而言,我们有几个客观问题:1.网络的稳定性。 2.流量以及手机的处理能力。 3.WEB特性带来的用户体验降低。

虽然说现在是3G网时代,但是3G信号的稳定性依然是问题。(PS:本人在地铁10号线上就完全没有3G信号)那么,当用户网络出于不稳定甚至断开的时候,我们要做的就是让客户成功,流畅地进入程序哪怕是进入登陆页面或者缓存页面也号,但绝不能出现无网络使传统WEB的白页和无法进入的情况。

另一点我们要注意的,就是流量和处理能力了。虽然3G网速度快了,但是现在依然没有包月无限制的3G套餐,咱们是走流量的,那么这就意味着我们不能像传统WEB开发那样为了好看尔加入大量的资源文件,用户看到流量费后会疯的。所以,我们要做的就是:只从网络获取动态数据。

最后就是WEB的特性了,大家都知在切换页面时,我们需要经历请求——相应——解释这么3个步骤,哪怕是所有页面都在本地,这都是会带来一定延迟的。而且没有任何动画效果。

针对这些客观问题,我们需要如何去优化我们的程序?

当然,上次我们提到过B/C/S架构,通过AJAX请求动态数据,本地化所有框架页面和资源文件。这里当然是针对第一个和第二问题作出的方案。当然,光是这样还不够。

对于手机的处理能力,虽然已经可以赶上当年的PC了,但因为毕竟还是解释性语言,速度肯定是不如JAVA和C,就JS语言来说,虽然处理引擎在ANDROID2.2上已经得到很大的改善了,但对于我们开发者来说,没有最好,只有更好。

在页面引用JS文件,依然会造成加载延迟,这点无庸置疑。所以,我们可以把JS文件通过JS注入对象注入到内存中。这样,即省略了文件引用,而且从内存中直接读取速度也会快得多。但有一点需要注意的是:初始化性质的JS不适合注入;因为注入的JS只有在onRexseeReady以后才可以使用。即:

代码段
1:        window.onRexseeReady=function(){
2:       
3:        ......//注入的JS方法
4:       
5:        }

再就是页面预载入。它的做法把页面的内容(纯字符串)加载到内存中,然后浏览器直接解释内存中的字串,这样一来,我们就省略了相应和请求的时间——因为它们都在后台做好了。
请注意:关于JS注入这里需要补充一下,直接使用JS注入只能注入字符串。要注入整个JS文件需要用rexseeFile.getContent函数来配合使用。

最后,如果大家希望程序有源生开发的平行滑动效果,就用页面过渡动画设置一下吧,最后附上水平滑动动画代码。

代码段
1:            rexseeTransition.clearStyle();
2:        rexseeTransition.clearPostStyle();
3:        rexseeTransition.setStyle('animation-repeat:repeat;background-color:#000000;animation-type:translate;animation-translate-x-from:0;animation-translate-x-to:-100;animation-translate-y-from:0;animation-translate-y-to:0;animation-translate-repeat-count:0;animation-translate-duration:1000;');
4:        rexseeTransition.setPostStyle('animation-post-start:start;animation-repeat:repeat;background-color:#000000;animation-type:translate;animation-translate-x-from:100;animation-translate-x-to:0;animation-translate-y-from:0;animation-translate-y-to:0;animation-translate-repeat-count:0;animation-translate-duration:1000;');
5:        rexseeTransition.enable();

关于Rexsee的切换动画RexseeTransition的Java源码,回头我再贴出来,如有需要的可以回复我~~
发表于 2011-12-16 20:28:43 | 显示全部楼层
Rexsee是啥?这些代码看不明白
点评回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

Archiver|手机版|小黑屋|52RD我爱研发网 ( 沪ICP备2022007804号-2 )

GMT+8, 2024-12-23 20:18 , Processed in 0.062871 second(s), 16 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表