当前位置:文档之家› Rexsee EMS入门篇——缓存加速和预加载、JS注入、页面过渡动画

Rexsee EMS入门篇——缓存加速和预加载、JS注入、页面过渡动画

讲了这么多的对象方法,今天我门换换口味,来看看优化方面的东西。



如果大家接触过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: }

再就是页面预载入。它的做法把页面的内容(纯字符串)加载到内存中,然后浏览器直接解释内存中的字串,这样一来,我们就省略了相应和请求的时间——因为它们都在后台做好了。



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

代码段
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();

相关主题
文本预览
相关文档 最新文档