我有一个asp.net mvc应用程序,返回包含n年数据的JSON结果,然后在JavaScript图表上呈现。
为了获得良好的用户体验(性能方面),我正在寻找最佳解决方案,无论是将JSON数据缓存到客户端,还是在用户点击具有不同参数(例如日视图、周视图等)的图表��,查询相同的JSON数据而不会访问服务器。
请有经验的人士帮助我们作出最佳决策,建议采用最佳实践将数据缓存在客户端或服务器端,或者每次切换图形时直接访问数据库。
谢谢。
我有一个asp.net mvc应用程序,返回包含n年数据的JSON结果,然后在JavaScript图表上呈现。
为了获得良好的用户体验(性能方面),我正在寻找最佳解决方案,无论是将JSON数据缓存到客户端,还是在用户点击具有不同参数(例如日视图、周视图等)的图表��,查询相同的JSON数据而不会访问服务器。
请有经验的人士帮助我们作出最佳决策,建议采用最佳实践将数据缓存在客户端或服务器端,或者每次切换图形时直接访问数据库。
谢谢。
首先,数据库在哪里?如果您在本地网络上使用千兆位局域网,则访问它不是问题。然而,在互联网上情况就不同了。人们的带宽有限,特别是在移动设备上,因此您应该限制HTTP调用。此外,较少的HTTP调用意味着对服务器的压力较小。
以下是一些提示:
考虑分页
当加载“两年时间”的数据时,我想象中是很多数据,就像是 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的限制,因此要将数据转换为字符串并使用PersistJS存储,检索时获取字符串并使用JSON.parse()解析。我已经做过你试图做的事情,这是我的经验。我在工作中使用Oracle的Site Studio中间件。我寻找了一个能够与它一起工作的框架,但没有找到。所以我尝试了下面两个选项。
1)数据库查询返回一定数量的行。我尝试了2000行作为测试。一个简单的foreach循环将返回的数据转换为JSON数据。因此,它在循环遍历行时实际上构建了一个长数组的JSON变量。通过这种方式,您正在模拟本地数据库的快照。JS实际上可以非常快速地访问数组元素,您可能会惊讶于您可以多快地排序、修改、删除信息。
<script>
var appData = [{'id':'0','first':'Sam','last':'Smith'},{'id':'1','first':'Dan','last':'Smith'}];
</script>
这个JSON数据被包含在一个script标签内。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
});
});
然后您可以使用JQuery在doc.ready上处理名为data的类。您还可以将JSON数据放入值中,并稍后解析它。请记住,JQuery的开发人员反对开发人员以这种方式使用类。根据我的经验,如果您不过度使用它,它会非常好用。