在客户端缓存大量 json 结果

Cache large volume of json result on client side

本文关键字：json 结果 客户端 缓存      更新时间：2023-09-26

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

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

有人可以帮助我们在缓存最佳实践方面做出最佳决策，即数据是否应该缓存在客户端或服务器端，或者应该直接命中每个图形切换的数据库？

提前谢谢。

首先，数据库在哪里？如果您在具有千兆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方法在现代浏览器中是原生的，但如果您需要迎合旧浏览器，Crockford有一个库来解析它

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

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

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

  • 仅在需要时呼叫

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

  • 同步缓存

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

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

我已经完成了你想做的事情，这是我的经验。我在工作中使用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模式，并且也很容易进行快速的客户端排序和过滤。如前所述.js Backbone和其他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 的人反对开发人员以这种方式使用类。根据我的经验，如果你不过度使用它，它的效果很好。

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