markmalek / Fixed-Header-Table

jQuery plugin for tables with fixed headers
www.fixedheadertable.com
MIT License
931 stars 542 forks source link

Fixed Colums on large datasets causing performance issues #34

Open jlocashio opened 12 years ago

jlocashio commented 12 years ago

When attempting to load the plug-in on a large dataset (tested on ~1200 rows) with fixed columns (tested with 2 colums fixed), javascript is taking inordinately long to complete the process. FF9.0.1 gives repeated script warnings, and IE9 just waits, up to 2 minutes. If we remove the fixed columns, the render times drop to almost nothing.

The dataset tested has 1198 rows of 12 columns. The table is ajaxed onto the page (not that it should matter). I have also tried with a dataset of ~230 rows (same columns) which is also slower than it should be but not enough to stop the JS engine.

pvannuff commented 11 years ago

I have noticed the same issue.

Using the speed tracer extension of chrome, I boiled the problem down to the _fixHeightWithCss method. This method seems to be called on each cell, causing a layout event every time.

I could fix the performance problem a good deal by simply commenting out the code of that method, since our table does not require the height to be changed/dynamic. First there were 384 layout events (taking 6 seconds), by commenting out the code only 28 layout events remained (taking 808 msec).

Some more information about this issue can be found on http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html and http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ .

I'm not sure how easy the code of this plugin can be improved to address this problem, but perhaps this information can help other people.

neesonqk commented 7 years ago

Same problem here