Updating cells on large tables particularly slow in Firefox

mrc

As seen on my jfiddle ( https://jsfiddle.net/dy9473c9/ ) example, I'm having issues with Firefox in particular when it comes to updating data in a cell. When clicking the button on the example, some rows should become invalidated, get a new value, and be redrawn. This takes ~ 1800ms on my machine in Firefox, and ~450ms on my machine in Chrome.

Is there a better way to handle the updates that would make this faster? Currently I'm doing something like this:

dataSet.forEach(function(row, index) {
            if (index % 2 == 0)
                return; // just to show not updating every single entry

            row.office++;
            table.cell(index, "office:name").invalidate();
        });

It would be great if I could even just get it to update the visible entries first to have the appearance of being faster.

bindrid

a straight for loop with typically give better performance over a foreach look though it takes a lot of data (as maybe in your case) for users to see a difference.

mrc

I should point out the loop without table.cell.invalidate() takes just a couple of milliseconds.

bindrid

And how long doe it take to update the column then invalidate and redraw the whole table after the data has been updated instead of invalidating each and every cell in the loop?

mrc

Ohh.. I don't think you can specifically invalidate columns (unless I missed it) but searching around based on what you recommended, it seems like

table.cells(null, "office:name").invalidate(); 

performs significantly faster. I'll have to try this in my real code but this is looking promising. Almost too promising ... (down to 5 milliseconds). Thanks!