1

我正在尝试加快我的 jQuery 移动网络应用程序的速度,并且在 Google 上我发现了有关页面缓存的信息。似乎无法找到关于它的作用的适当详细解释,所以任何人都可以阐明为什么它是坏的吗?许多人似乎都希望将其关闭。

我的主要问题是(我认为)与此相关 - 基本上我有许多 js 函数,它们在应用程序启动时将大量 HTML 插入到不同的页面中,然后在每个页面加载时插入。例如,当我加载我的幻灯片页面时,它会在 pageload 中加载幻灯片,因此它不会一直在 DOM 中。这是应该为所有页面做的吗?过多的 HTML 是否会对一般应用程序的速度产生很大的影响?

我想隐藏我的 8 个页面的所有内容,但是在每个页面加载时使用 js 显示内容,但这值得吗?(然后显然将其再次隐藏在 pagehide 上。)

我认为这与页面缓存有关吗?

另外,我使用的是多页模板,因此所有页面都在一个 HTML 文件中,但是在我有很多外部 js 库的情况下,将此页面加载到另一个 HTML 文件中是否更有意义使用 HTML 和画布标签/js 文件减慢应用程序的其余部分?

谢谢

4

1 回答 1

3

为了能够理解页面兑现,您需要了解 jQuery Mobile 如何处理页面加载。

1 HTML / 多页

这个解决方案可能最容易处理。一切都在一个大文件中,如果您保持一切井井有条,您将不会遇到太多问题。但是,如果您正在创建一个大型网络应用程序(特别是如果这个网络应用程序将通过 phonegap 框架成为移动应用程序),那么这个解决方案将会产生很多问题。

因为这是一个大文件,jQuery Mobile 会将所有内容加载到 DOM。这将导致更快的过渡效果,同时使您的 Web 应用程序臃肿。

如果您正在创建仅适用于桌面浏览器的 Web 应用程序,那么这就是您的解决方案。在任何其他情况下运行它。

多个 HTML 模板

此模板更适合移动设备。只有一个 HTML 页面会被加载到 DOM 中,并且之前的每个页面都会从其中删除(除非特别定义)。此解决方案可能会出现页面转换问题,但除非您创建大型 HTML 文件,否则它不会成为问题。

只有使用 ajax 加载的页面才会被加载到 DOM 中。因此,每个新的 HTML 文件都将被加载,每个旧的/以前的文件都将被删除。

页面缓存

如果您使用多 HTML 模板解决方案,您可以预取一些页面,从而防止转换问题。

可以使用加载页面功能预取页面:

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

或者通过将data-dom-cache="true"属性放入页面 div 容器中,如下所示:

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

自动页面缓存

也可以使用此属性在移动级别上打开/关闭缓存:

$.mobile.page.prototype.options.domCache = true;

或像这样禁用:

$.mobile.page.prototype.options.domCache = false;

此属性必须在 mobileinit 事件中加载:

$(document).bind("mobileinit", function(){
    $.mobile.page.prototype.options.domCache = true;
});

此属性不能与1 个 HTML/多页模板一起使用。

有关这方面的更多信息,可以在官方文档中找到:http: //jquerymobile.com/demos/1.0rc2/docs/pages/page-cache.html

于 2013-03-11T23:14:07.517 回答