如何将“原始”行数据加载到 ag-grid

Question

我正在处理一个高吞吐量问题。 我的目标是至少在 chrome 浏览器上显示由 1M 行组成的网格。

这些行是从运行在同一台机器上的 python 服务器动态获取的。该服务器已经将整个数据集加载到内存中。 客户端（浏览器）和服务器（python）之间的通信是通过 websocket 进行的。 网格有virtualPaging: true的选项。

到目前为止，我在加载每页 100 行的页面时取得了一些不错的表现。 尽管如此，在开始时加载整个 1M 数据集（因此无需远程获取行）显示滚动效果显着改善（没有“白行”效果）。

我想在不将整个数据集存储在浏览器内存中的情况下实现相同的性能。

我会尝试的第一步是避免一些转换步骤。 客户端从服务器接收到一个数组数组，这意味着服务器上的行模型是“位置的”（给定r 作为通用行，r[0] 是与第一列相关的元素，r[1] 到第二个等等）。但是ag-grid的回调函数successCallback需要一个对象数组，这意味着每一行都带有与列名相关的键（给定r作为通用行，r["firstColumn"]是与第一列，r["secondColumn"] 到第二列，依此类推）。

从服务器的角度来看，第二种方法是完全不可行的，因为键值机制使用了巨大的内存浪费。 这导致需要对客户端收到的每个页面进行本地转换：

client.appendCallback("message", function(message){
    message = JSON.parse(message.data);
    switch(message.command) {
        case "GetRows":
            if(message.res.code == 0) {
                var bulk = [];
                var arr = message.res.data;
                for (var i = 0, len = arr.length; i < len; i++) {
                    bulk[i] = {"par1" : arr[i][0], "par2" : arr[i][1], "par3" : arr[i][2], "par4" : arr[i][3], "par5" : arr[i][4], "par6" : arr[i][5]};
                }
                _data.successCallback(bulk);
            }
            break;
        default:
            break;
    }
},"ws");

我需要的是一种将行作为数组而不是作为避免转换部分的对象传递给 successCallback 的方法，如下所示：

client.appendCallback("message", function(message){
    message = JSON.parse(message.data);
    switch(message.command) {
        case "GetRows":
            if(message.res.code == 0) {
                _data.successCallback(message.res.data);
            }
            break;
        default:
            break;
    }
},"ws");

任何帮助将不胜感激

Answer 1

这个呢？

修复 pageSize 为 100 之类的值。

由于您使用服务器端分页，因此您已经实现了自己的数据源：因此，当您被要求加载数据时：加载 [并转换] 10000 行之类的内容并将它们存储在内存中。

然后使用您自己的中间分页：每次网格请求下一行时，要么从内存中获取它们，要么获取接下来的 10k 行，然后 [convert and] 仅返回第 100 行。

[convert] 部分是您选择在从服务器加载时或在询问接下来的 100 行时放置转换操作。

如果数据量很大并且您考虑不仅在本地计算机上部署它，那么 Angular（或浏览器，我真的不知道它在哪里）透明地支持 gzip 压缩数据。