Much slower under jQuery 1.4
Much slower under jQuery 1.4
I don't have specifcs of why, but when upgrading from jQuery 1.3.2 to jQuery 1.4; using datatables 1.5.6 it becomes a magnitude slower.
I'm using datatables with large html tables (1000 records or more).
Both Safari and Firefox behave much slower. I'm initializing datatables with the following:
[code]
jQuery(document).ready(function() {
/* Mark selected row */
jQuery(".dataTable tbody").click(function(event) {
jQuery(oTable.fnSettings().aoData).each(function() {
jQuery(this.nTr).removeClass("row_selected");
});
jQuery(event.target.parentNode).addClass("row_selected");
});
/* Add a click handler for the delete row */
jQuery("#delete").click( function() {
var anSelected = fnGetSelected( oTable );
var iRow = oTable.fnGetPosition( anSelected[0] );
oTable.fnDeleteRow( iRow );
} );
/* Estimate window height to adjust length size */
var ts = parseInt((jQuery(window).height() - 270) / 22.9);
/* dataTable object customization */
jQuery.fn.dataTableExt.oPagination.iFullNumbersShowPages = 5;
oTable = jQuery(".dataTable").dataTable( {
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": 'Show '+
'Screen'+
'10'+
'15'+
'20'+
'100'+
'1,000'+
'All'+
' entries',
"sSearch": ''
},
"iDisplayLength": ts,
"bJQueryUI": true,
"bAutoWidth": false,
"aoColumns": [
null,
null,
null,
null,
null,
{ "bSearchable": false,
"bSortable": false }
],
"aaSorting": [[4, "desc"]]
} );
/* Search field customization */
sSearchName = "Search...";
jQuery(".dataTables_filter > input").attr("value", sSearchName);
jQuery(".dataTables_filter > input").css("color", "#777");
jQuery(".dataTables_filter > input").focus(function(){
//test to see if the search field value is empty or "search" on focus, then remove our holding text
if(jQuery(this).attr("value") == ""|| $(this).attr("value") == sSearchName){
jQuery(this).attr("value", "");
}
jQuery(this).css("color", "#000");
});
//test to see if the value of our search field is empty, then fill with our holding text
jQuery(".dataTables_filter > input").blur(function(){
if(jQuery(this).attr("value") == ""){
jQuery(this).attr("value", sSearchName);
jQuery(this).css("color", "#777");
}
});
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i
I'm using datatables with large html tables (1000 records or more).
Both Safari and Firefox behave much slower. I'm initializing datatables with the following:
[code]
jQuery(document).ready(function() {
/* Mark selected row */
jQuery(".dataTable tbody").click(function(event) {
jQuery(oTable.fnSettings().aoData).each(function() {
jQuery(this.nTr).removeClass("row_selected");
});
jQuery(event.target.parentNode).addClass("row_selected");
});
/* Add a click handler for the delete row */
jQuery("#delete").click( function() {
var anSelected = fnGetSelected( oTable );
var iRow = oTable.fnGetPosition( anSelected[0] );
oTable.fnDeleteRow( iRow );
} );
/* Estimate window height to adjust length size */
var ts = parseInt((jQuery(window).height() - 270) / 22.9);
/* dataTable object customization */
jQuery.fn.dataTableExt.oPagination.iFullNumbersShowPages = 5;
oTable = jQuery(".dataTable").dataTable( {
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": 'Show '+
'Screen'+
'10'+
'15'+
'20'+
'100'+
'1,000'+
'All'+
' entries',
"sSearch": ''
},
"iDisplayLength": ts,
"bJQueryUI": true,
"bAutoWidth": false,
"aoColumns": [
null,
null,
null,
null,
null,
{ "bSearchable": false,
"bSortable": false }
],
"aaSorting": [[4, "desc"]]
} );
/* Search field customization */
sSearchName = "Search...";
jQuery(".dataTables_filter > input").attr("value", sSearchName);
jQuery(".dataTables_filter > input").css("color", "#777");
jQuery(".dataTables_filter > input").focus(function(){
//test to see if the search field value is empty or "search" on focus, then remove our holding text
if(jQuery(this).attr("value") == ""|| $(this).attr("value") == sSearchName){
jQuery(this).attr("value", "");
}
jQuery(this).css("color", "#000");
});
//test to see if the value of our search field is empty, then fill with our holding text
jQuery(".dataTables_filter > input").blur(function(){
if(jQuery(this).attr("value") == ""){
jQuery(this).attr("value", sSearchName);
jQuery(this).css("color", "#777");
}
});
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i
This discussion has been closed.
Replies
I've tried a few tests with jQuery 1.4 ( http://datatables.net/forums/comments.php?DiscussionID=964 ) and the results show that 1.4 is a touch slower for some reason, that I'm not yet aware of. I'm currently working on a number of optimisations that will be included in the DataTables 1.6 release, and they will hopefully improve the speed of DataTables quite a bit - although the exact amount will depend on how it is being used.
Regards,
Allan
[code]
$('#myTable').dataTable({
"iDisplayLength": 50,
"sPaginationType": "full_numbers",
"aaSorting": []
});
[/code]
Nothing fancy...
There is also one or two other comments on the web which note that for some tasks jQuery 1.4 is slower than 1.3 ( http://st-on-it.blogspot.com/2010/01/so-is-really-jquery-14-30000-times.html for example), although there aren't many. You can also try this Javascript library performance comparison, which shows that 1.4 is slower for some tasks than 1.3: http://dante.dojotoolkit.org/taskspeed/
So my next task is to bump up the speed of DataTables with 1.4... :-)
Allan
Thanks for looking into it.
From reference, and my experience (which is very limited on jQuery). It would appear as if somehow the library is now looping into something exponentially), like if every time something changes in a child of it iterates on all its elements, so the performance is exponentially impacted with every new child added to it. I'm not sure if I completely make any sense :)
For small tables, this would not appear to be an issue, but I'm using tables that have 6 columns and between 1000 and 7000 rows. As other posters mentioned, it's really noticeable with 700+ records.
Perhaps running the development version of jquery with Safari's Javascript debugger or similar on Firefox might yield some light onto the issue
Some good news to start the day with. I spent some time last night looking at this specific issue, and am pleased to say I'm made some significant improvements to the performance of DataTables, and these are particularly for large data sets - although apply to all tables.
As a quick example, before my optimisation work, initialisation time for a 500 row table with 9 columns took around 4500mS in Safari 4. With optimisation I now get a 2000 row table with 9 columns initialised in around 660mS :-). Firefox and IE are showing similar benefits (indeed IE can process that table without showing 'stop this script' warnings').
I've got a few things left to try, and I'm not really in a position where I can make a release today, but will do over this coming weekend with these enhancements and a few other little bug fixes.
Regards,
Allan
Have a go with the 1.6.1 release ( http://datatables.net/forums/comments.php?DiscussionID=1245 ) and let me know how you get on. Hopefully this will address this issue of performance.
Regards,
Allan
Thanks for the update,
Allan