Slow performance on Firefox 18 and Internet Explorer 9; Works well in Chrome

Slow performance on Firefox 18 and Internet Explorer 9; Works well in Chrome

josephjgmjosephjgm Posts: 1Questions: 0Answers: 0
edited February 2013 in General
I have a 30 row/97 column table with fixed column and horizontal scroll. The initialization code is below with an animate call to scroll the table to a specific column. On Firefox, it takes over 15 seconds to render the table. On IE, it takes over 1 minute. On Chrome, it takes 1 or 2 seconds. What can I do to improve load time?

[code]
oTable = $('#sampleTable').dataTable( {
"sDom": 'T<"clear">tr',
"bPaginate": false,
"bSort": false,
"bSortClasses": false,
"bProcessing": true,
"sScrollX": "100%",
"bScrollCollapse": true,
"aoColumnDefs": [
{ "aTargets": [ 0 ], "sClass": "left" },
{ "aTargets": [ 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97 ], "sWidth": "70px", "sClass": "right" }
],
"oTableTools": {
"sSwfPath": "/Content/flash/copy_csv_xls_pdf.swf",
"aButtons": ["xls","csv"]
}
} );
new FixedColumns( oTable, {
"iLeftColumns": 1,
"iLeftWidth": 180
} );

$('.dataTables_scrollBody').animate({
scrollLeft: $('#sampleTable').find('.startingIndex').first().parent().prev().position().left
});
[/code]

Also, the data in the table will be updated based on some variables on a separate script. The following is what I've implemented to update rows. In Firefox, I get a Warning: Unresponsive script message: [quote]A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.[/quote]


[code]
oTable.fnUpdate(oTable.fnGetData(0).slice(0, startingIndex).concat(newRowData0), 0, undefined, false);
oTable.fnUpdate(oTable.fnGetData(1).slice(0, startingIndex).concat(newRowData1), 1, undefined, false);
oTable.fnUpdate(oTable.fnGetData(2).slice(0, startingIndex).concat(newRowData2), 2, undefined, false);
oTable.fnUpdate(oTable.fnGetData(3).slice(0, startingIndex).concat(newRowData3), 3, undefined, false);
oTable.fnUpdate(oTable.fnGetData(5).slice(0, startingIndex).concat(newRowData5), 5, undefined, false);
oTable.fnUpdate(oTable.fnGetData(6).slice(0, startingIndex).concat(newRowData6), 6, undefined, false);
oTable.fnUpdate(oTable.fnGetData(7).slice(0, startingIndex).concat(newRowData7), 7, undefined, false);
oTable.fnUpdate(oTable.fnGetData(8).slice(0, startingIndex).concat(newRowData8), 8, undefined, false);
oTable.fnUpdate(oTable.fnGetData(9).slice(0, startingIndex).concat(newRowData9), 9, undefined, false);
oTable.fnUpdate(oTable.fnGetData(10).slice(0, startingIndex).concat(newRowData10), 10, undefined, false);
oTable.fnUpdate(oTable.fnGetData(12).slice(0, startingIndex).concat(newRowData12), 12, undefined, false);
oTable.fnUpdate(oTable.fnGetData(13).slice(0, startingIndex).concat(newRowData13), 13, undefined, false);
oTable.fnUpdate(oTable.fnGetData(14).slice(0, startingIndex).concat(newRowData14), 14, undefined, false);
oTable.fnUpdate(oTable.fnGetData(15).slice(0, startingIndex).concat(newRowData15), 15, undefined, false);
oTable.fnUpdate(oTable.fnGetData(17).slice(0, startingIndex).concat(newRowData17), 17, undefined, false);
oTable.fnUpdate(oTable.fnGetData(18).slice(0, startingIndex).concat(newRowData18), 18, undefined, false);
oTable.fnUpdate(oTable.fnGetData(19).slice(0, startingIndex).concat(newRowData19), 19, undefined, false);
oTable.fnUpdate(oTable.fnGetData(20).slice(0, startingIndex).concat(newRowData20), 20, undefined, false);
oTable.fnUpdate(oTable.fnGetData(21).slice(0, startingIndex).concat(newRowData21), 21, undefined, false);
oTable.fnUpdate(oTable.fnGetData(22).slice(0, startingIndex).concat(newRowData22), 22, undefined, false);
oTable.fnUpdate(oTable.fnGetData(23).slice(0, startingIndex).concat(newRowData23), 23, undefined, false);
oTable.fnUpdate(oTable.fnGetData(25).slice(0, startingIndex).concat(newRowData25), 25, undefined, false);
oTable.fnUpdate(oTable.fnGetData(26).slice(0, startingIndex).concat(newRowData26), 26, undefined, false);
oTable.fnUpdate(oTable.fnGetData(27).slice(0, startingIndex).concat(newRowData27), 27, undefined, false);
oTable.fnUpdate(oTable.fnGetData(28).slice(0, startingIndex).concat(newRowData28), 28, undefined, false);
oTable.fnUpdate(oTable.fnGetData(29).slice(0, startingIndex).concat(newRowData29), 29, undefined, false);
oTable.fnUpdate(oTable.fnGetData(30).slice(0, startingIndex).concat(newRowData30), 30, undefined, false);
oTable.fnUpdate(oTable.fnGetData(31).slice(0, startingIndex).concat(newRowData31), 31, undefined, false);
[/code]

Replies

  • allanallan Posts: 63,234Questions: 1Answers: 10,417 Site admin
    edited February 2013
    How fast (or not) is the initialisation without the fnUpdate calls?

    I think it will be FixedColumns that is showing things down. That many update calls will make FixedColumns redraw like crazy. Try it without FixedColumns as well. You might be better calling fnClearTable and then fnAddData to add the new data in a single call.

    Allan
  • josephjgmjosephjgm Posts: 1Questions: 0Answers: 0
    Hi Allan. The initialisation on Firefox takes over 15 seconds to render the table. On IE, it takes over 1 minute. On Chrome, it takes 1 or 2 seconds.

    Regarding the table update, I tried the fnClearTable and fnAddData. That solved my update issue.

    Thanks!

    - Joseph
This discussion has been closed.