如何加快滚动大表？答案

【问题标题】：How to speed up scrolling through large tables?如何加快滚动大表？
【发布时间】：2011-07-13 15:30:04
【问题描述】：

我在标签中向用户显示了许多大表，每个标签一个表。这些表可能会变大到导致速度问题的程度，最多可达 5000 行和 100 列。当表格变大时，在选项卡之间切换和在表格中滚动会变得很慢。所以我正在寻找加快查看表格内容的方法。这是有关页面设置的其他一些信息；我会发布一个示例，但我没有可以发布的示例。

我在表格上实现了标题/行锁定，以便始终可以看到每行中的前 4 列，因为之前所做的没有滚动锁定并查看表格的大部分毫无意义，因为你不知道你在看什么；识别单元格不再可见。

对于我通过此查看的大多数数据集没有任何问题，但是当表格达到上述大小时，只是尝试滚动表格，浏览器需要几秒钟才能赶上。我猜浏览器不喜欢页面上的内容量，所以我试图找出一种加快速度的好方法。

我已经根据我最初的想法对页面做了很多事情，因为它之前的速度更慢。我已经通过在 PHP 中构建“锁定”表而不是尝试动态转换常规表来减轻 Javascript 的大部分负载，这有很大帮助。我现在在 Javascript 中做的唯一事情是为每个表进行 ajax 调用，将返回的 html 代码附加到页面，如果需要，调整表的 div 容器的大小，并设置滚动触发器，以便固定标题和固定边随着内容滚动，我认为此时我可以从 Javascript 引擎中移除更多内容。

我认为为表格实现一些虚拟滚动或分页可能会有所帮助，但我不确定如何自己实现它。我发现了许多具有这些功能的东西，但没有我需要的滚动锁，所以我认为我无法获得已经可以使用的东西。（即使每个“页面”显示的行数较少，我也想不出一种方法来解决大约 100 列的事实）。我认为，不仅仅是从 php 脚本发送表格的 html，我还可以发送一个数组，其中每个索引都有一行的 HTML 或其他东西。然后，当我加载页面时，我可以加入数组的相关部分，删除先前显示的部分，并将加入的 HTML 代码转储到页面。这样，每页更改只有一个 .append 。但在我继续尝试实施类似的东西却发现它并没有真正帮助，它会导致其他问题等之前，我认为我应该获得其他想法或建议。

【问题讨论】：

您确定浏览器是显示此数据的最佳位置吗？
相比什么？ PDF什么的？正在显示的数据可以随时更新。自动创建一些不同格式的报告是不可行的，因为如果在计划的过程中创建报告的数据可能会过时，或者在发生更新时必须每天为每个用户运行数百次。
报告消费者是否定期查看大部分数据？还是不同的用户或用户类型需要不同的部分？如果是这样，您可以根据需要生成更小、更有针对性的报告。同样的原则也适用于输入：如果特定用户只需要编辑数据的一部分，则提供一个 HTML 表单作为界面来访问这部分数据。
不幸的是，他们确实如此。虽然有一个界面允许他们查看数据的各个部分，但他们仍然可以选择查看附加到他们的所有数据，其中大约 10% 的人拥有足够的数据，这可能会导致我遇到的问题有。不过，编辑数据不是问题，这是一个完全不同的过程。
您当前是否在用户切换到新标签时转储现有数据？

标签： jquery scroll

【解决方案1】：

在我看来，您试图为错误提出的问题寻找技术解决方案。

让我们稍微分析一下您的问题。如果您有一个包含大约 50,000 个单元格（5,000 行和 100 个单元格）的表格，如果向用户显示所有信息的方式错误。

首先没有显示器能够一次显示信息。放置一个 HTML 页面的所有信息并在浏览器中滚动并不更好，例如关于分页按钮的分页。从用户的角度来看，拥有小尺寸的 HTML 页面将在很多方面提高性能。

更重要的一点是，用户无法感知来自 50,000 个单元格的所有信息。用户必须分析信息。在单元格或行中使用背景颜色可以改善用户体验（例如，查看here）。使用here或here等其他一些控件可以帮助减少您需要显示的列数并帮助用户快速分析信息。

此外，您应该允许用户根据某些过滤器显示信息子集并按特殊顺序对其进行排序。请参阅工具栏过滤here 或搜索对话框示例here。在搜索字段中，您可以使用 jQuery UI 自动完成或其他有助于用户的控件。您还可以在表格中添加一些特定于您的问题的额外控件，并帮助用户设置更多特定于问题的过滤器。

因此，您应该考虑更适合您的情况的数据过滤方式。可能您需要显示的信息可以更好地表示为树、带有子网格的网格或仅使用两个网格（主网格和另一个网格，其中包含在主网格中选择的项目的详细信息）。可能数据的分组是用户需要的。以the jqGrid demo page 为例，考虑用户界面的更多不同可能性，您可以使用这些可能性来解决您的问题。

【讨论】：

这就是我要找的。不一定能直接解决我遇到的问题，而是一种解决方法。

【解决方案2】：

我们也遇到过这样的问题，为了更好地管理网格，我们已经从 .net 或 infragistics 网格转移到了 jqgrid。

您也可以在以下位置查看演示。

http://www.outperformtechnologies.com

【讨论】：

【解决方案3】：

我会看看 SlickGrid：

https://github.com/mleibman/SlickGrid/wiki

它能够使用 AJAX 从 Web 服务加载数据。这样，您一次只需要实际渲染一组行。不过，祝你好运找到任何好的文档......

【讨论】：

我以前见过 SlickGrid，虽然我很想使用它，但它看起来并不是处理大量列的可行解决方案。以this 为例。向右滚动，然后向下滚动一点。如果不来回走动，您将不知道自己正在查看哪些任务。而且我必须处理比这更多的列。

【解决方案4】：

老实说，我没有阅读所有内容 :) 但我认为有两种解决方案：滚动时分页或“动态加载”行，两种解决方案都使用 ajax

【讨论】：

【解决方案5】：

与圣地亚哥一样-我也没有阅读全文，
但如果我明白了它的要点，我建议jqGrid，它是专门为处理大量数据而设计的。
我不能 100% 确定它会如何处理大量列，但我建议尝试一下。

【讨论】：

jqGrid 很棒，我之前在另一个项目中使用过它！不幸的是，它只是为多列制作宽表