10

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

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

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

提前致谢。

4

3 回答 3

10

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

以下是一些提示：

  • 考虑分页

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

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

  • JSON化数据

    使用 JSON 在网络之间传输数据。除了轻巧之外，它还具有结构性。以后解析和存储会更容易。

    如何：PHP 有一个 json_encode 函数将数组转换为 JSON 字符串。我假设您的框架具有类似的功能。让字符串在页面上回显，然后用于JSON.parse从 JSON 字符串转换为 JS 对象。JSON 方法在现代浏览器中是原生的，但如果你需要迎合旧浏览器，Crockford 有一个库来解析它

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

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

    如何：使用JSON.stringifyPersistJS 将数据转换为字符串并将其存储。然后进行检索，获取字符串并使用JSON.parse()

  • 仅在需要时调用

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

  • 同步缓存

    如果您担心过时的数据，那么通过使用一些实时数据获取方法来让一些 AJAX 同步您的缓存系统，如本关于Comet的 wiki 中所述。

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

于 2012-05-15T13:19:53.420 回答
0

我已经完成了您想做的事情，这是我的经验。我在工作中使用 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 人员反对以这种方式使用类的开发人员。根据我的经验，如果你不过度使用它，它会很好。

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