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

Question

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

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

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

提前致谢。

Answer 1

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

这里有一些提示：

• 考虑分页

  当加载“2 年价值”时，我会想象很多，比如 100 多页的论文。考虑分页数据而不是一次加载它们。这可以节省带宽和缓存空间（如果有限制的话）。

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

• JSONify 数据

  使用 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 同步您的缓存系统，如本 wiki 关于Comet 中所述。

最后两点取决于您的缓存框架。但是BackboneJS 允许它的模型和集合同步到服务器，这与我提到的功能相同。

Answer 2

我已经做了你想做的事，这是我的经验。我在工作中使用 Oracle 的 Site Studio 中间件。我寻找一个可以使用它的框架，但找不到。所以我尝试了以下两种选择。

1) 数据库查询返回一定数量的行。我尝试了 2,000 个作为测试。一个简单的 foreach 循环将返回的数据转换为 JSON 数据。因此，当它遍历行时，它实际上会构建一长串 JSON 变量。通过这种方式，您正在模仿本地 dababase 的快照。 JS 实际上可以非常快速地访问数组元素，您可能会惊讶于排序、更改、删​​除信息的速度。

<script>
var appData = [{'id':'0','first':'Sam','last':'Smith'},{'id':'1','first':'Dan','last':'Smith'}];
</script>

此 JSON 数据包含在脚本标记中。 doc.ready 上的 JQuery 然后读取数据并根据需要将其添加到 html 文本中。当用户更改 JSON 数据值时，ajax 会触发并将更改保存到数据库。将这样的系统添加到您的应用程序中并不难。我后来使用 Google 的 Angular.js 将数据绑定到 UI 以拥有一个干净的 MV 模式，并且它也很容易进行快速的客户端排序和过滤。如前所述，Backbone.js 和其他 JS 框架可以将客户端数据同步到服务器。

2) 我将数据保存到 html 页面的第二种方法是再次使用 foreach 循环遍历返回的行。然后我使用老式的

将数据保存在 HTML 中

<input type="hidden" name="someName" value="someValue" />

然后我使用 JQuery 处理数据并将其添加到 UI。如果你真的想使用 JSON，你可以像这样将它嵌入 HTML 变量中

<input type="hidden name="row1" value="{'color':'red','style':'fancy','age':'44'}" />

然后您可以使用 JQuery 或 Angular.js 处理数据并将其绑定到您的 UI。

有趣的是，很多应用程序框架都没有内置的客户端缓存系统。在服务器端对选择菜单进行排序然后重新构建 html 确实效率低下。最好在 JS 中对其进行排序并动态重建选择菜单。这里存在安全问题，您不希望将私有信息打印到 JSON 或 HTML 变量中，因为它在查看源代码下可见。您还可以使用更多流氓技术将数据嵌入页面。考虑如下：

<span class="data" value="1234"></span>
$(function () { 
    $('.data').each( function() {
        var val = $(this).attr('value');
        console.log(val); //process data
    });
});

然后您可以在 doc.ready 上使用 JQuery 来处理名为数据的类。您还可以将 JSON 数据填充到值中，然后再将其解析出来。请记住，JQuery 人员反对以这种方式使用类的开发人员。根据我的经验，如果你不过度使用它，它会很好。

Answer 3

1. 从数据库中检索数据并在服务器上另存为静态文件。 提供 .css 或 .png 扩展名。 （浏览器会自动缓存样式表和图像文件。）。
2. 在隐藏字段中保存带有时间戳的数据文件名。（以确保在文件发生更改时从服务器加载最新文件）
3. 使用AJAX从服务器加载文件，第一次从服务器加载，下次从浏览器缓存加载。
4. 您可以使用 JSON.Parse() 来解析 AJAX 请求结果。