优化数据可视化Web应用程序的性能

时间:2012-12-23 13:17:04

标签: php javascript ajax json performance

我正在重写3年前编写的数据可视化Web工具。从那时起,浏览器的JavaScript引擎变得越来越快,所以我想把部分工作从服务器转移到客户端。

在页面上,数据在表格和地图(或图表)中可视化,它使用相同的数据,但以不同的方式,因此准备显示数据的两种算法是不同的。

在用户与数据下拉选择器的每次交互之前(3主+ 2sub取决于3主要),发送3个ajax请求,php完成所有工作并仅发回必要的数据(在html中用于表/ xml图表)非常微小的响应,没有性能问题和javascript附加响应,并没有比追逐更改事件更多。

所以性能还可以,但是每次更改标准时,用户都必须等待ajax响应:/

现在我的想法是在一个ajax请求中发回一个json对象,仅在主要3个标准组合的每次更改时,然后让javascript填充表中的数据和ajaxsuccess上的图表/地图,然后再更改2个子标准。

我的犹豫是关于服务器发送的json的结构,有效负载的余额。

实际上,如果只需要一个算法来创建所需的json结构来显示原始数据中的数据,我就可以将php处理数据到这个对象中,以便javascript处理它而无需任何额外的处理;但是有2个。

所以

  • 如果我让php处理数据来创建2个对象(一个用于表/一个用于图表),我将把json响应的大小加倍&增加客户端的内存使用量;我不喜欢这种方法,因为这两个对象包含相同的数据,只是结构不同&冗余是邪恶的,不是吗?

  • 如果我发送原始对象并让javascript搜索要显示的内容以及我向客户端提供大量工作的位置 - 这也会在每次子标准更改时(或者我可以创建所有json对象) ajaxsuccess所以他们准备好在这个子标准改变的情况下?) - 对于那些使用旧浏览器/小ram的用户来说我很担心......

(未经处理的原始json对象,取决于标准在3kb到12kb之间变化,介于500到2000个记录之间)

我没有发现最佳方法......

那么对于这个单个原始数据到多个结构化对象的工作,你会有php(增加响应大小和发送冗余数据)或javascript(增加javascript有效负载)处理原始数据吗?

非常感谢您的意见

1 个答案:

答案 0 :(得分:0)

我找到了合适的解决方案,所以我会回答我自己的问题。

我跟随@ Daverandom的建议:

  • PHP发送原始数据(以及一些取决于主要标准组合的参数)

  • JavaScript处理原始数据并在页面中呈现

  • 如果更改了子标准,JavaScript会重新处理原始数据,因为测试循环过程看起来非常快,并且不会冻结浏览器,因此无需将结构化对象保留在范围

  • 使用JSON AJAX响应发送激进的缓存标头(这些数据永远不会更改 - 每年只添加新记录),以防用户重新查询已经咨询过的数据:因此原始数据不会保留在JavaScript范围(如果没有显示)

  • 最重要的是,php回显的JSON字符串缓存在服务器上(因为这些数据永远不会改变)所以这会减少数据库查询并缩短响应时间

最终代码整洁,易于维护,应用程序完美无瑕。

感谢@Daverandom的帮助。