LocalStorage，多个 Ajax 请求还是巨大的 Ajax 请求？

Posted 2023-03-05

【中文标题】LocalStorage，多个 Ajax 请求还是巨大的 Ajax 请求？

【英文标题】：LocalStorage, several Ajax requests or huge Ajax request?

【发布时间】：2011-12-26 13:42:30

【问题描述】：

我正面临一个非常大的问题（至少对我而言）。我会给你一些背景知识。

我正在开发一个移动网络应用程序，它将显示有关我所在城市的公共汽车站和自行车站的信息。它将显示公交车站和自行车站的 GMap 标记，如果单击它，您将获得有关公交车到达时间或可用自行车数量的信息。我已经很好地覆盖了。

有问题的部分是加载站点。

我的第一种方法是在页面加载时加载全部个站点。它大约是 200 Kb 的 JSON 加上它遍历数组并将其放入地图的时间。它们是隐藏加载的，因此当用户单击行名时，它们会使用“findMarker”功能出现。如果地图上存在其他站点，则它们会被隐藏以避免地图中出现太多标记。

这适用于 iPhone 4 或全新 HTC 等新手机，但不适用于 2 年前的手机。

我想到的第二种方法是通过请求加载它们，所以你点击车站，它们被加载到地图上，然后显示出来，但这会导致两个问题：

首先是您可能（或可能不会）执行多个请求 可能以相同的结尾 (?) 第二个是为了避免这样 许多标记，它们应该被隐藏或删除，因此您可能正在删除 一段时间后应该再次需要的信息，例如自行车站 作为一个组而不是按行加载。

最后，我考虑使用 LocalStorage 来存储它们，因为它们不会发生太大变化，但会产生大量数据，然后在检索它们时很痛苦是键值，而且（我不太确定）我可以找到不支持此功能的设备必须回退到其他选项之一。

也就是说，我认为可能有人遇到了类似的问题并以某种方式解决了它，或者对我有一些提示:)。

任何帮助将不胜感激。

【问题讨论】：

我认为对于 web 应用程序来说，速度和性能都是重要的，所以事先缓存任何静态数据（在加载启动屏幕或其他东西期间）恕我直言是要走的路。这对于离线使用或连接不良时也是可选的。初始加载可能需要更长的时间，但我认为 webapp 会更快。

感谢您的评论菲尔。这种想法会导致更多的混乱。从本地存储搜索和添加会不会比从服务器检索和添加更多的 CPU 消耗？

从本地存储读取几乎肯定会比发出 HTTP 请求、读取响应和解析 JSON 数据更快。但是，我认为通过使用浏览器缓存可以避免使用本地存储，请参阅下面的答案。

【参考方案1】：

最佳方法取决于用户的行为。他们通常点击很多电台还是只点击几个？他们更喜欢更快的启动（按需加载）还是响应更快的站点详细信息显示（预加载数据）？

值得研究的一种方法是按请求加载数据，但使用浏览器缓存（ETag 和 Expires 标头）来避免一遍又一遍地检索相同的信息。这将解决您的两个问题，而无需处理 LocalStorage。

查看这个问题了解浏览器缓存的不同方法ETag vs Header Expires

【讨论】：

非常感谢您的回复 StefanO。你的观点似乎是一个很好的起点。虽然我发现 jQuery 在 Ajax 调用中有 ifModified 属性来检查 ETag 和 Expires 标头，但我找不到任何可靠的来源来将这些实现到 php 的 json 响应中。你有这方面的任何信息吗？

我不是 PHP 专家，所以我不知道任何有助于自动执行此操作的框架功能。但这些是标准 HTTP 标头，因此您可以像这样设置它们： header('Expires: Fri, 11 Nov 2011 15:00:00 GMT'); header('ETag: "686897696a7c876b7e"');

此外，Apache 和 nginx 等 Web 服务器可以配置为自动设置缓存标头（例如，将所有页面缓存 24 小时）。如果您需要更好地控制缓存，您只需要关注您的代码。

实施需要一些时间，但最后我按照您的建议做了，而且效果很好。由于 JSON 正在缓存，因此负载平均已显着减少，并且每个时间从 400 毫秒减少到 1 毫秒。