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

Question

I am using a dc-tableview table based on data tables with around 1000 rows and 20 columns (most of them are small integers) but the table takes mostly between 3-6 seconds to load at pageload.

DeferRender is activated (true) to render only the current page (5 rows).

As a data source I use the crossfilter's dimensions (accessed by .columns([data: "...")]) The data is currently saved in a javascript csv-string and used by the crossfilter. I use ajax to load the page.

Are there any other performance optimizations for the dc-tableview table?

Edit: I could increase the performance a bit. At the moment timings look like this (DOM: 1.48s, Load 4.36s):

I have no big timings in network tab (cordova.js is missing in browser).

The dc-tableview.js table takes about 500ms to 1000ms to load (when I log it in the console). So this is 1/3 to 1/2 of the whole DOM-Render time.

Peformance Record looks like this:

Do you think that can still be improved? Any other ideas?

The code is quite complex so I would need to know what part of the code you need to see.

Answer 1

Okey, I found some optimizations for the general load.

The table takes around 500ms to load, which is not that much but still a number - probably due to the large dc-tableview.bs.min.js file (100'000+ rows when not minified).

I ask myself if and how easy it is to clean it up (maybe delete unused functions like the export buttons and stuff). There is a lighter version of the .js available on github but I need the "move column" functionality, which is only availbable in full mode.

This is how I could optimize the peformance:

1. Use events to defer the load of not critical functions (gets loaded after first rendering):

for browser:

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

for mobile (cordova):

document.addEventListener("deviceready", function (event){
...
});

2. Put everything (the source data which gets parsed) into cache so it must only be parsed once.

3. Minify all .js and .css

4. Resize images and optimize compression

5. Reduce number of dc-tableview columns whenever possible

Any other recommendations?