如何提高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 版本,但我需要“移动列”功能,该功能仅在完整模式下可用。
我可以这样优化性能:
- 使用事件延迟非关键函数的加载(在第一次渲染后加载):
浏览器:
window.addEventListener("load", function(){
...
});
移动设备 (cordova):
document.addEventListener("deviceready", function (event){
...
});
将所有内容(被解析的源数据)放入缓存,因此它只能被解析一次。
缩小 所有 .js 和 .css
调整图片大小并优化压缩
尽可能减少 dc-tableview 列的数量
还有其他推荐吗?
我正在使用 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 版本,但我需要“移动列”功能,该功能仅在完整模式下可用。
我可以这样优化性能:
- 使用事件延迟非关键函数的加载(在第一次渲染后加载):
浏览器:
window.addEventListener("load", function(){
...
});
移动设备 (cordova):
document.addEventListener("deviceready", function (event){
...
});
将所有内容(被解析的源数据)放入缓存,因此它只能被解析一次。
缩小 所有 .js 和 .css
调整图片大小并优化压缩
尽可能减少 dc-tableview 列的数量
还有其他推荐吗?