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

lz210

如果大家接触过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源码，回头我再贴出来，如有需要的可以回复我~~

lz1004

Rexsee是啥？这些代码看不明白