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 回答