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

Question

我正在重写一个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搜索要显示的内容以及我在哪里向客户端提供大量工作 - 这也适用于每个子标准更改（或者我可以在ajaxsuccess上创建所有json对象所以他们在这个子标准变化的情况下准备好） - 在这里，我用旧的浏览器/小公羊用户喜中有忧...

（原始JSON对象及时治疗，根据标准3KB之间变化和12kb，在500和2000之间的记录）

我没有发现最好的方法...

因此，对于这个单一的原始数据多个结构化对象的工作，你会有PHP（增加响应大小和发送冗余数据）或JavaScript（增加JavaScript负载）处理原始数据？

由于一吨您的意见

Answer 1

我找到了一个合适的解决方案，所以我会回答我的问题。

我跟随@ Daverandom的建议是：

• PHP将原始数据

• 的JavaScript处理原始数据和（一对夫妇的参数取决于主要标准结合一起）在页面中渲染它

• 如果子标准发生变化，JavaScript会重新处理原始数据，因为测试循环过程看起来非常快并且不会冻结浏览器，所以它e不需要将结构化对象保留在范围内

• 使用JSON AJAX响应发送攻击性缓存标头（这些数据永远不会更改 - 每年仅添加新记录），以防用户重新咨询已有数据已经被查阅过了：如果原始数据没有被显示，那么原始数据不会保存在JavaScript范围内

• 最重要的是，由php回显的JSON字符串被缓存在服务器上（因为这些数据永远不会改变）减少数据库查询并提高响应时间

最终代码是整洁，易于维护，并且应用程序完美无瑕。

感谢@Daverandom的帮助。