javascript - 处理大型数据集的图形和显示的最佳方法

Question

我们的网站为客户提供各种数据服务；其中之一是仪表数据。有些仪表每 15 分钟记录一次信息，有些则每分钟记录一次信息。该数据被发送到我们的 SQL 数据库。

所有这些数据都通过图表显示(通过 PHP 和 JPGraphs 在服务器端生成)，每个单独的日志条目在可折叠表中显示为一行(jquery 1.10.2)。

当客户想要查看数据时，他们会选择日期范围以及他们想要查看的指标。如果他们想要查看每分钟记录一次的仪表的最后 3 天，那么加载速度会非常快。如果他们想查看其中 2 个，则加载大约需要 15-30 秒。当他们想要查看一个月的数据时，真正的问题就出现了；特别是超过 1 个规范。这可能需要 15-20 分钟来加载，并且浏览器会反复询问我们是否要停止脚本填充可折叠表行 (jquery)。

显然这是一个问题，因为客户想要相对快速的响应(最多 1-5 分钟)。理想情况下，我们还希望能够一次提取几个月的仪表数据。我们现在能做到这一点的唯一方法是一次提取两周的数据并手动编译总数。

供引用:如果我想为 2 个每分钟一次的记录仪表提取一个月的数据，那么将通过 jQuery 将 86,400 行添加到可折叠表中。该页面大约需要加载需要 5 分钟，在此期间浏览器非常慢。

我的问题是:使用基于 PHP 的服务器(Symfony 1.4 框架)和 javascript 提取/绘制/填充数据的最佳方式是什么？

我们是否应该考虑升级分配的处理能力/RAM(我们由 GoDaddy 托管)？有没有比 jquery 更快的填充可折叠项的方法？我们所有的计算都是在服务器端完成的。我们是否应该只提取原始数据并让客户端进行数据处理？我们应该在客户端和服务器之间拆分数据处理吗？

这是网页的屏幕截图。它被裁剪，以便不显示更多客户端敏感信息:

Answer 1

回应我的评论。

由于您仅在服务器端需要整个数据集(您在服务器上创建图形)，这意味着您实际上不需要将整个数据集发送到客户端。

而是将一小部分发送给客户端。假设前 200 个结果。然后，您可以继续将结果集的其余部分缓存到 JSON 文件中(精简版数据库，无论您真正想要什么)。然后创建一个用户可以请求更多数据的界面。无限滚动固然不错，但也有其自身的问题。也许只是一个显示加载更多数据的按钮。正如人们所说，表中一次拥有超过数百个数据点是疯狂的，因为人们无论如何都不会看它。然后，当他们点击按钮获取更多数据时，您可以向服务器发送一个 AJAX 请求，其中包含所需数据的正确参数。

例如，当他们第一次单击 getMoreData() 时，您想要获取接下来的 200 个数据点。所以你发送 getMoreData(start=200, length=200)。您的服务器接收 AJAX 请求并在 JSON 文件或精简版数据库中找到正确的数据，无论您在何处缓存结果。用户可以继续请求更多数据(确保更新启动参数)，并且您只返回一小部分数据。用户甚至没有意识到他们面前没有整个数据集，因为看起来他们有。

其中比较复杂的是排序和搜索。如果您想实现这些，那么您需要确保转到服务器端并对缓存的结果进行排序/搜索。

所以基本上你有一个系统，你可以在服务器端创建整个图表，这不会花很长时间。需要很长时间的是将整个数据集加载到客户端。所以你把它分成小块。您甚至可以使用此方法轻松创建分页等。