Outstanding slowness & number of DOMs

johnsan

Hi everyone,

First of all, thank you very much Allan for your great plugin ! I am always thankful to the developers like you who give so much of their time to provide the community with great code.

I wish the sole purpose of this message was to thank you, but I have a bit of an issue with my code. Being a novice myself, I recently started coding in PHP and Javascript and found your plugin to display nice table with the sortable feature and all the other goodies.

At the moment, I display small tables (the biggest is 177 records, and I display 10 fields for each record).

While the query is extremely fast to be executed in phpmyadmin (about 0.0001 sec), it takes 6 seconds to display in Firefox.
I know my code is crap but it still seems very excessive. I have also noticed that a very big number of DOMs are created for this table : 4600 approximately.

Could that explain why it is so slow ? Is it normal to have so many DOMs when displaying a table of data ?

Thank you very much for your help.

Best regards from down under.

Jonathan

allan

Hi Jonathan,

Are you using client-side processing, or client-side? I think my answer will depend on which...! Client-side - 6 seconds is quite a while for Firefox - IE I can understand... - do you know which part is slowing it down? If you use YSlow or just the default profiling in Firebug, does is indicate anything useful. Server-side - ouch! It would suggest that the net connection is horribly slow or the SQL table huge/unoptimised?

Allan

johnsan

Hi Allan,

Thank you much for your answer. I use client-side processing. With Firebug and YSlow activated (Firefox caching disabled), I don't get much information on what slows down the whole thing.

I call all my JS libraries in the header (including jquery 1.3.2, jqueryUI, dataTables, but that means a few HTTP requests), then produce the table with all 177 records and process the DOMs with Datatables. The sql is neither huge nor unoptimised.

edit: by the way, in Google Chrome, it is waaaay faster (almost instantaneous). Haven't tried IE (my code doesn't work with it :p)

allan

177 records shouldn't bog down even Firefox - so possibly something funny going on here. If you 'profile' the Javascript - does that show anything useful?

Allan

jonas

Unfortunately, nothing shows when I 'profile' Javascript in Firebug :(

Something I forgot to mention is that I apply jquery.jeditable on each cell of the table depending on the class of the cell (see below).

I should have thought about that earlier... applying the jeditable objects to each class is apparently what slows down the display of the table. If I remove the declarations of the jeditable objects, then it takes a little 1.5 sec to display the 177 records.

[code]

/* Apply the jEditable handlers to the table */
$('.editable_cmp').editable( 'update.php', {
id : 'cellid',
name : 'cellvalue',
indicator : 'Saving...',
tooltip : 'Double click to edit...',
event : 'dblclick',
cancel : 'Cancel',
style : 'display: inline',
submit : 'OK',
height : 'none'
} );

$(".editableActivities_cmp").editable("update.php", {
data : '<?php print json_encode($tab_activities); ?>',
type : 'select',
event : 'dblclick',
id : 'cellid',
name : 'cellvalue',
indicator : 'Saving...',
tooltip : 'Double click to edit...',
style : 'display: inline',
submit : 'Save',
cancel : 'Cancel'
});

$('.editableCountry_cmp').editable('update.php', {
data : '<?php print json_encode($tab_country); ?>',
id : 'cellid',
name : 'cellvalue',
type : 'select',
tooltip : 'Double click to edit...',
event : 'dblclick',
submit : 'Save',
cancel : 'Cancel'
});

$('.SetRightsCMPL').click(function() {
$('').load(this.href).dialog({draggable: false, width: 825, modal:true, position:['center',202], resizable: false, title:'User & Classification Rights'});
return false;
});

$('.SetLayoutCMPL').click(function() {
$('').load(this.href).dialog({closeOnEscape: false, draggable: true, height: 700, width: 825, modal:true, position:['center',0], resizable: false, title:'Table Layout' }); //, open: function(event, ui) { $('#menu').hide(); $('#content').hide();}, close: function(event, ui) { $('#loading').show(); window.location = 'index.php?page=company_list&src=2'; }
return false;
});

$('#company_data_table').dataTable( {
"bJQueryUI": true,
"bAutoWidth": false,
"iDisplayLength": 25,
"sPaginationType": "full_numbers",
"bSort": false
});

[/code]

Sorry for the bother :s I need to find how to optimize the jeditable declarations.

jonas

Hi Allan,

Just a quick update and closure comment.

I removed the jeditable declarations as it is the source of performance issues.

I made a test with 3000 records in my DB and it took 18 seconds in Firefox to display all the results. Would you say that it's reasonably fast ?
I am doing a little bit of treatment on each row while I display the table so it could very well be the reason why it takes "that" long.

So I just wanted to have your opinion on that delay considering the number of records.

Thanks again for your great library !

allan

18 seconds still sounds like a fairly long time to me - and as an end user I'd probably get bored in that amount of time :-). The time it takes will depend on your computer speed, so if you have a slower computer (?) then it might be reasonable - but it you've got a nice fast one, then it sounds a bit slow.

Perhaps profiling the Javascript execution using Firebug, or Webkit's inspector would shed some light on where the problem lies?

Allan