如何提高dc-tableview.js (DC.js, Crossfilter, data tables, ajax)性能?

How to increase dc-tableview.js (DC.js, Crossfilter, data tables, ajax) performance?

我正在使用 dc-tableview table 基于数据 table 大约 1000 行和 20 列(其中大部分是小整数),但 table 在页面加载时加载大部分时间在 3-6 秒之间。

DeferRender 已激活 (true) 以仅呈现当前页面(5 行)。

作为数据源,我使用 crossfilter 的维度(通过 .columns([data: "...")] 访问) 数据当前保存在 javascript csv 字符串中并由交叉过滤器使用。 我使用 ajax 加载页面。

dc-table视图是否有任何其他性能优化table?

编辑:我可以稍微提高性能。 目前计时看起来像这样(DOM:1.48s,加载 4.36s):

我在网络选项卡中没有大计时(浏览器中缺少 cordova.js)。

dc-tableview.js table 需要大约 500 毫秒到 1000 毫秒 来加载(当我在控制台中登录时)。所以这是整个 DOM-Render 时间的 1/3 到 1/2。

性能记录如下所示:

您认为还可以改进吗?还有其他想法吗?

代码非常复杂,所以我需要知道您需要查看代码的哪一部分。

好的,我发现了一些针对一般负载的优化。

table 需要大约 500 毫秒 来加载,虽然不多,但仍然是一个数字 - 可能是因为 dc-tableview.bs.min.js 文件(100'000+ 行 未缩小时)。

我问自己清理它是否以及清理起来有多容易(也许删除未使用的功能,如导出按钮和其他东西)。 github 上有一个较轻的 .js 版本,但我需要“移动列”功能,该功能仅在完整模式下可用。

我可以这样优化性能:

  1. 使用事件延迟非关键函数的加载(在第一次渲染后加载):

浏览器:

window.addEventListener("load", function(){
...
});

移动设备 (cordova):

document.addEventListener("deviceready", function (event){
...
});
  1. 将所有内容(被解析的源数据)放入缓存,因此它只能被解析一次。

  2. 缩小 所有 .js 和 .css

  3. 调整图片大小并优化压缩

  4. 尽可能减少 dc-tableview 的数量

还有其他推荐吗?