Question

我有一个asp.net mvc应用程序，它返回包含多达数年的数据的JSON结果，然后在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同步，如本维基中有关Comet所述。

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

Answer 2

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

1）数据库查询返回一定数量的行。我尝试了2,000作为测试。一个简单的foreach循环将返回的数据转换为JSON数据。所以它在循环遍历行时构建了一长串JSON变量。通过这种方式，您可以模仿本地数据库的快照。 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来处理名为data的类。您还可以将JSON数据填充到值中，稍后再解析它。请记住，JQuery人员反对以这种方式使用类的开发人员。根据我的经验，如果你没有过度使用它，那就很有效。

Answer 3

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

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

3 个答案: