javascript - 在客户端缓存大量的 json 结果

Question

我有一个 asp.net mvc 应用程序，它返回 JSON 结果，其中包含最多 n 年的数据，然后在 Javascript 图表上呈现。

为了获得良好的用户体验(在性能方面)，我正在寻找最佳解决方案是否可以在客户端缓存 JSON 数据，以便当用户点击具有不同参数(例如日、周)的图表时查看等，无需访问服务器即可查询相同的 JSON 数据。

有人可以帮助我们做出关于缓存最佳实践的最佳决定，即数据是应该缓存在客户端还是服务器端，还是应该为每个图形切换直接访问数据库？

提前致谢。

Answer 1

首先，数据库在哪里？如果您在具有千兆 LAN 的本地网络上，那么点击它不会有问题。但是，在互联网上情况并非如此。人们的带宽有限，尤其是在移动设备上，因此您应该限制您的 HTTP 调用。此外，更少的 HTTP 调用意味着更少的服务器压力。

这里有一些提示:

• 考虑分页

  加载“2 years worth”时，我想象了很多，比如 100 多页的论文。考虑对数据进行分页，而不是一次加载所有数据。这可以节省您的带宽和缓存空间(如果它是有限的)。

  如何:让服务器脚本根据客户端需要的数据分割数据。在查询中使用 LIMIT 在 SQL 中创建分页非常容易。逻辑类似于 starting_item = (page_needed - 1) * items_per_page

• JSON化数据

  使用 JSON 将数据传入和传出网络。除了重量轻，它还结构化。以后解析和存储会更容易。

  方法:PHP 有一个 json_encode 函数可以将数组转换为 JSON 字符串。我假设您的框架具有类似的功能。让字符串在页面上回显，然后使用 JSON.parse 将 JSON 字符串转换为 JS 对象。 JSON methods原生于 modern browsers但如果您需要满足旧浏览器的需求，Crockford has a library解析它

• 使用众所周知的存储框架

  如果跨页面缓存需要持久存储，我最近遇到了PersistJS它将 localStorage 抽象为浏览器上可用的。另外，这是一个 JS implementation of LZW .将它放在手边，因为 localstorage 使用字符串来存储数据并且它有 5-10MB 的限制。

  如何:使用 JSON.stringify 将数据转换为字符串并使用 PersistJS 存储。然后为了检索，获取字符串并使用 JSON.parse()

将其解析回来

• 只在需要时调用

  让缓存系统仅在修改、添加或不存在某些内容时调用服务器。如果数据在那里，你为什么要为它调用服务器？

• 同步缓存

  如果您担心数据过时，那么可以使用一些 AJAX 同步您的缓存系统，方法是使用有关 Comet 的 wiki 中描述的一些实时数据获取方法。 .

最后两点取决于你的缓存框架。但是BackboneJS允许它的模型和集契约(Contract)步到服务器，它们具有我提到的相同功能。