_fngatherdata calls itself recursively in IE

csulok

Hey!

I have a table with 3000 rows and 6 columns and lately (didn't notice when) it's been extremely slow in IE6-7-8.

I've ran Dynatrace Ajax to find out why and it seems there's a _fngatherdata function going recursively nuts taking the page almost 4 minutes to process. It used to be 2-3 before *something* got messed up.

I've seen issues with this function and IE in general in dt 1.6.0 but I've also seen the optimizations in 1.6.1. Is it possible there's something missing?

This is the page in question https://www.chemaxon.com/about/our-users/academic-2/
We use jquery 1.4.1 and jquery datatables 1.6.1 though I've tried downgrading and that didn't help.

Here's a screenshot of what dynatrace says: http://i.imgur.com/g6ytn.png

[code]jQuery(document).ready(function() {
$.getScript("/wp-content/themes/chemaxon/jquery.dataTables.min.js", function() {
$content = $("#content")
$datatabletbody = $(".datatable tbody")
$(".datatable").dataTable({
"iDisplayLength": 25,
"bProcessing": true,
"bPaginate": true,
"aaSorting": [[0,'asc']],
"fnInitComplete": function() {
$(".datatable",$content).show();
$(".dataTables_paginate div:first",$content).text("« Previous");
$(".dataTables_paginate div:last",$content).text("Next »");
$(".datatables_loading",$content).hide();
},
"bAutoWidth": false,
"bSortClasses": false,
"asStripClasses": ['dt_z',''],
"fnDrawCallback": function() {
$("tr",$datatabletbody).tooltip({
delay: 0,
showURL: false,
track: true,
fade: 250,
bodyHandler: function() {
return $($(this).attr("rel")).html()
}
})
},
"oLanguage": { "sLengthMenu": 'Show 102550All entries' }
})
})
})[/code]


Thanks!

allan

There certainly seems to be an issue with IE somewhere - but having a hard time pinning it down. I've got a test table here with 8 columns, and 4000 rows. It takes Safari 4 around 800mS to render the table, and IE8 around 9.5S. So IE is certainly slow, and I will see if I can optimise this, but it's not as slow as your page...

Your page is less complex for the DataTable, but it's obviously having a real nightmare rendering it. Indeed IE8 takes a lot longer than just 25 seconds on my machine when loading you page :-(. So at the moment - I honestly don't know - but will look at this. Time to install DynaTrace...

Allan

csulok

Is it possible there's something interfering with datatables? Maybe the fact that I have the table hidden until it's finished initializing?

I've tried reducing the problem, by removing settings, like the tooltip stuff or the alternate row classes, or the $.getscript loading part, but I haven't seen any measurable change.

allan

It's certainly possible that there is something is which causing DataTables to take longer than it should do for the initialisation. Anything which is doing DOM processing is going to kill it on large tables, but your initialisation code looks okay. Perhaps try just a simple $(...).dataTable(); and see if that helps at all. Also reducing the complexity of any HTML inside the cells (if there is any?).

Allan

csulok

there is no html inside the cells, only text and i've tried $(...).dataTable() without any params but that didn't improve performance, in fact it should be slower because certain feature's aren't turned off, like adding sorting classes or calculating column width

allan

Very odd indeed. Are you able to put the table content into a plain HTML page without anything in it. So just , , etc - no styling. That would rule out every possible interaction and point the finger firmly at DataTables (which is where it sounds like anyway...). I'm not entirely sure how much I'll be able to improve this, but certainly willing to give it a go.

If it's still taking ages with just a plain HTML page, are you able to send me a link showing that in action? http://datatables.net/contact if you don't want to make it public :-).

Regards,
Allan

csulok

http://www.chemaxon.com/jquery-bug2.html

I don't notice any performance improvements, so yes, the issue seems to point to DT.

> I'm not entirely sure how much I'll be able to improve this, but certainly willing to give it a go.

Are you sure this is a question of polishing for improved performance? This looks like a very nasty bug to me. 260k calls to the same function can't be right for a table that contains 18000 cells, though I don't have any understanding of how the plugin works so it's likely I'm way off ;)

Thanks

allan

I think I might have an answer for you (although being quick here - not much time :-) ).

Firstly _fnGatherData is only being called once - as can be seen from the 'invocations' part of your screenshot - so no problem there. The 260'000mS (!) is the time taken to run the function.

I've just tried a number of things, and the one that's made all the difference for me is to remove the 'style="display:none'. Try removing that (remember to clear your cache) and see if that helps. It now renders in IE8 on my machine in 8 seconds, rather than the 3-4 minutes before.

My guess is that IE is doing some "optimisation" for visible objects, and I wonder if they are needing to parse the DOM tree every single time it does any DOM operation on a hidden element... That's very nasty if this is correct.

The other things I did were to add line breaks for each row (in the HTML) and remove the complicated DataTables initialisation. Neither had any effect really.

Allan

csulok

Dear god /o\

style="display:none;" was added because I don't want the user to experience a 3000 rows long table that once javascript downloaded, evaluated and initialized datatables would suddenly drop to just 25 rows. This is a very noticable and ugly effect.

Is it possible this optimization can be seen as a jquery bug, in that jquery didn't take care of it. I'm wondering if this should be reported as a bug.

Anyhow, thanks for your time and investigation and I'm glad it's not a bug for you ;)

allan

Haha - yup - that's what I thought when I realised as well! As I mentioned I suspect that the IE team have decided that the display:none elements aren't likely to be addressed, so are shunted into a very slow memory buffer/process, or something along those lines.

It's not anything wrong with jQuery as DataTables uses direct DOM methods here (an optimisation itself), so it's certainly an issue for the IE team to look at... I should probably report a bug... Quite a daft bug to have, as display:none is an obvious thing to do for an enhanced user experience with things like this.

Regards,
Allan