Attached test case source code and screen shot of error.

Attached test case sample.

To reproduce issue:

• Load noHeaderGroup.jsf
• Click on Populate button
• Click on Toggle Pagination button
• Change the drop down to show 2000 records
• Unresponsive script popup is shown in FF and the page is unresponsive while it loads.

If you take scrolling off and load the same number of pages the popup isn't shown.

The profiling of the test case revealed that the bottleneck is triggered when the data table JS code uses the 'fadeTo' effect (defined in jQuery) or tries to re-arrange the table after a data scroll.

The profiling results in http://jira.icesoft.org/secure/attachment/14329/Profiling+results.jpg show that line 6609 and 6420 will use 52% and respectively 27% of the processing time. Both bottlenecks are triggered when Element.offsetWidth or Element.offsetHeight properties are queried. See http://jira.icesoft.org/secure/attachment/14339/First+bottleneck.jpg and respectively http://jira.icesoft.org/secure/attachment/14337/Second+bottleneck.jpg .

Line 6609 in jQuery code which corresponds to the jQuery.expr.filters.hidden function is indirectly invoked from ace-datatable.js at line 684 when the ':hidden' selector is used (see call stack in http://jira.icesoft.org/secure/attachment/14335/Triggered+from+ace-datatable.js.jpg ). Also at line 472 the data table code will invoke 'fadeTo' function which indirectly will reach jQuery.expr.filters.hidden again (see call stack in http://jira.icesoft.org/secure/attachment/14336/Also+triggered+again+from+ace-datatable.js.jpg ).

The second bottleneck is triggered from the ace-datatable.js at line 733 when the column's width is queried ( see http://jira.icesoft.org/secure/attachment/14338/Second+bottleneck+triggered+from+ace-datatable.js.jpg ).

The conclusion is that we should avoid as much as possible calls into the jQuery API that will end up using the ':hidden' pseudo selector since none of the modern browsers support it natively, thus making its usage very slow. See also http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=jquery-performance-exp-110413194523-phpapp02&startSlide=7 .

Though :hidden pseudo-selector is slow, it is not as slow as the bottleneck implies. It was making repetitive calls due to being incorrectly used on the ancestors of the node to find if the node itself was hidden in turn, when :hidden checks for this case itself when called on the node.

This had been fixed and now hidden is used only on the table. Cases of scrollable + thousands of rows + multiple columns still have delays associated with them.

Revision #28833
Committed by nils.lundquist
9 minutes ago
ICE-7963 - Changed use of :hidden, had been unnecessarily been calling hidden for ancestors, when this case is included in calling :hidden for a descendant.

Even after this change there is some delay (a great delay in Webkit) due to other bottlenecks. Closing this issue as the other major bottleneck (in FF) that Mircea had analyzed, the column width evaluation, has no possibilities for optimization.

Please add this commit to the icefaces-3.0.x-maintenance branch also.

Fix also applied to maintenance branch.