我知道这个问题已经存在几年了，但是jqgrid现在支持虚拟滚动:

http://www.trirand.com/blog/phpjqgrid/examples/paging/scrollbar/default.php

但是禁用了分页

看看dGrid:

https://dgrid.io/

我同意用户永远不需要同时查看数百万行数据，但是dGrid可以快速显示它们(一次显示一整屏)。

不要把海洋烧开来泡一杯茶。

在我看来，最好的网格如下:

Flexigrid: http://flexigrid.info/ jQuery网格:http://www.trirand.com/blog/ jqGridView: http://plugins.jquery.com/project/jqGridView jqxGrid: https://www.jqwidgets.com/ 英格丽德:http://reconstrukt.com/ingrid/ SlickGrid http://github.com/mleibman/SlickGrid

datatable http://www.datatables.net/index

屏蔽 http://demos.shieldui.com/web/grid-virtualization/performance-1mil-rows 智能电网 https://www.htmlelements.com/demos/grid/overview/

我最好的3个选择是jqGrid, jqxGrid和DataTables。它们可以处理数千行数据并支持虚拟化。

这里有一些优化，你可以应用来加快速度。只是想出来了。

由于行数可能以百万计，因此需要一个仅用于来自服务器的JSON数据的缓存系统。我无法想象有人想要下载全部X万个项目，但如果他们这么做了，这就会成为一个问题。这个小测试在Chrome上的一个数组上20M+整数崩溃在我的机器上不断。

var data = [];
for(var i = 0; i < 20000000; i++) {
    data.push(i);
}
console.log(data.length);​

您可以使用LRU或其他缓存算法，并设置愿意缓存的数据量的上限。

For the table cells themselves, I think constructing/destroying DOM nodes can be expensive. Instead, you could just pre-define X number of cells, and whenever the user scrolls to a new position, inject the JSON data into these cells. The scrollbar would virtually have no direct relationship to how much space (height) is required to represent the entire dataset. You could arbitrarily set the table container's height, say 5000px, and map that to the total number of rows. For example, if the containers height is 5000px and there are a total of 10M rows, then the starting row ≈ (scroll.top/5000) * 10M where scroll.top represents the scroll distance from the top of the container. Small demo here.

为了检测何时请求更多数据，理想情况下，对象应该充当侦听滚动事件的中介。该对象跟踪用户滚动的速度，当用户看起来正在减速或完全停止时，对相应的行发出数据请求。以这种方式检索数据意味着数据将是碎片化的，因此在设计缓存时应考虑到这一点。

此外，浏览器对最大传出连接的限制也可以发挥重要作用。用户可以滚动到某个位置，该位置将触发AJAX请求，但在此完成之前，用户可以滚动到其他部分。如果服务器的响应不够快，请求就会排队，应用程序看起来也没有响应。您可以使用一个请求管理器，所有请求都通过它路由，它可以取消挂起的请求以腾出空间。

我使用了jQuery网格插件，这是很好的。

演示

我能想到的最佳方法是在每次滚动或滚动结束前以json格式加载数据块。Json可以很容易地转换为对象，因此可以很容易地不引人注目地构造表行