关于JQueryMobile的缓存和预取 转

关于JQueryMobile的缓存和预取（原创译文）

 

1. 预取页面      Prefetching pages （总觉得不应该这样翻译，应该叫预加载）

说明：当采用single-page类型时，我们可以预先加载页面到dom树里（ps：通过浏览器的查看可以看到，ff里是浅色）。jqm会在当前page加载后，加载那个具有 data-prefetch 标签（target）的page，这时候pagecreat事件就被触发，你就可以在dom里面看到这个页面本没有的pages。

方法：1. <a id="setting" data-icon="custom" href="settings.php" data-prefetch >设置</a>

            2.  $.mobile.loadPage( pageUrl, { showLoadMsg: false } );

优点：当预取页面时候，用户看不到ajax请求页面的信息（ps：只要不是多图杀猫时代）。

经过本人测试：页面不预取的情况跳转链接页面时候会出现菊花，当预取之后，菊花没有了，速度提升了，但是设定预取的页面会出现页面已经加载完毕，联网的菊花还在转，说明程序在ajax预取！反正你都会看到菊花^_^!!! 适用场景：因为预取页面会产生额外的HTTP请求并占据了带宽,所以明智的选择是：预取的页面被访问可能性是最高的。所以一般会被应用于 相片画廊，让用户可以快速在相片之间切换。

2.控制dom大小 DOM size management

对于页面的动画切换（沙发里浏览器支持的最好），两个切换的页面都需要在dom里，因此，旧的页面可能会占满浏览器的缓存空间，甚至会导致一些移动浏览器运行缓慢，或崩溃（我的touch就崩了）。

因此，jqm提供一个简单的机制来控制dom的大小。

只要是通过ajax加载的页面，当你长时间（ps：具体多长时间文档没有说，我是测试到了，如果你把预取的页面射到缓存里，那么你肯定看不到这个效果）不去访问他jqm 会标记并从dom中删除他，如果你重新访问一个被删除的页面，浏览器会从他的缓存里面找这个网页对应的html文件，如果没有缓存，就只能从服务器重新获取。（In the case of nested list views, jQuery Mobile removes all the pages that make up the nested list once you navigate to a page that's not part of the list）。

这个机制对多网页页面不受用，因为jqm只删除那些通过ajax加载的页面。

3.dom 缓存 

Caching pages in the DOM

我们可以告诉jqm保留那些我们之前访问过的页面，而不是删除她们。

方法： 1.$.mobile.page.prototype.options.domCache = true;

             2.<div data-role="page" id="cacheMe" data-dom-cache="true">

             3.pageContainerElement.page({ domCache: true });

这部分就没什么可翻译了。

 

原文地址：

http://jquerymobile.com/demos/1.0/docs/pages/page-cache.html