Server side processing and slow performance in IE8

mateuszwdowiak

Hello everyone, this is my first post.
I have a problem with slow performance in Internet Explorer when using server side processing, i will show you some code so everyone can see what I am talking about:
- This is asp.net project, so in aspx I have an empty body
- in serverside code i have one function which makes Table with columns and one row, and finally:
[code] form1.Controls.Add(DataTable); [/code]
(there are 11 columns, so without any javascript, the HTML after serverside code (which takes only few mili secs) looks like this:
[code]











Name



Surname



Sex



Age



Date



Phone



City



Other



Smoking



Created On



Modified On






































[/code]

then goes JavaScript:

[code]

...

var tableHeight = $(window).height() - notTableContentHeight;
var columns = new Array();
for (var i = 0; i < $('#viewTable th').length - 1; i++) {
columns.push(i);
}

oTable = $('#viewTable').dataTable({
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [0, columns.length] },
{ "sWidth": "200px", "aTargets": columns },
{ "sWidth": "50", "aTargets": 0 }
],
"bProcessing": true,
"bSort": true,
"bServerSide": true,
"sAjaxSource": "CrmService.asmx/GetEntityData",
"fnServerData": function (sSource, aoData, fnCallback) {

aoData.push({ "name": "entityName", "value": $.urlParam("entityName") });
var jsonAOData = JSON.stringify(aoData);
$.ajax({
//dataType: 'json',
contentType: "application/json; charset=utf-8",
type: "POST",
url: sSource,
data: "{jsonAOData : '" + jsonAOData + "'}",
success: function (msg) {
fnCallback(JSON.parse(msg.d));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.responseText);
}
});
},
"bAutoWidth": true,
"bSortClasses": false,
"sScrollX": "100%",
"sScrollY": tableHeight + "px",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 10, //$("#viewTable").attr("rows"),
"aLengthMenu": [[10, 25, 50, 100, 250], [10, 25, 50, 100, 250]],
"fnInitComplete": function () {
new FixedColumns(oTable, {
"iLeftWidth": 50
});
oTable.fnAdjustColumnSizing();
}
});

[/code]

as you can see, in my code i call CrmService.asmx/GetEntityData method where i get data from sql.
this method also takes only a few mili secs. and returns data:

[code]
{"sEcho":1,"iTotalRecords":10210,"iTotalDisplayRecords":10210,"aaData":[["0","2","2","","2","","2","2","","","","2",""],["0","2","2","","2","","2","2","","","","2",""],["0","2","2","","2","","2","2","","","","2",""],["0","2","2","","2","","2","2","","","","2",""],["0","2","2","","2","","2","2","","","","2",""],["0","2","2","","2","","2","2","","","","2",""],["0","2","2","","2","","2","2","","","","2",""],["0","2","2","","2","","2","2","","","","2",""],["0","2","2","","2","","2","2","","","","2",""],["0","2","2","","2","","2","2","","","","2",""]]}
[/code]

and now it takes very very long time to render the table, it even crushes IE.
it only happens in internet explorer, in other browsers everything is fine.

Do you have any idea why this is happening and how to fix it?

mateuszwdowiak

i figured it out- it's because of using Fixed plugin - it slows down whole rendering.
without it it's much better

allan

This is because FixedColumns needs to calculate the row height for every row, which is horribly slow in older browser (even newer browsers find it hard with lots of rows). One way to address this is to disable the automatic row height matching, and just use CSS row heights: http://datatables.net/release-datatables/extras/FixedColumns/css_size.html . _Much_ faster.

Allan

bernie4711

Hi,

I have the same problem as described in this thread, but I DONT use the Fixed plugin.
Take a look here http://factfish.com/statistics/drill_down_local.php?location=47&shortcut=20
I'm using DataTables 1.8.2, the problem occurs with IE8 on Windows 7.

Here is the Javascript:
[code]
oTable = $('.factsTable').dataTable( {
"bSort" : true,
"aaSorting": [[ sortingColumn, "asc" ]],
"aoColumnDefs": columnDefs,
"bLengthChange": false,
"iDisplayLength": displayLength,
"bFilter": false,
"bProcessing": processing,
"bServerSide": serverSide,
"sAjaxSource": ajaxSource,
"bPaginate": paginate,
"sPaginationType": paginationType,
"oLanguage": {
"sInfo": tableInfo,
"oPaginate": {
"sFirst": tableFirst,
"sLast": tableLast,
"sPrevious": tablePrevious,
"sNext": tableNext
},
"sProcessing": tableProcessing
}
});
[/code]

Are there any other ideas?

Cheers

Bernhard

bernie4711

Hi,

just for the reference, if somebody else has this problems:
It is much better with the current Beta Version 1.9 (Beta 3).
The loading time goes down from 40 seconds to less then 5 seconds.

Bernhard

allan

@bernie4711: Thanks for the link. It seems very responsive to me. There is 165mS delay loading the data on each draw, and then much less than that to draw the table.

I don't really understand why it would be taking 1 second, never mind 5 or 40! (although it is good to hear that 1.9 has improved performance!).

Allan

bernie4711

Hi Allan,

thanks for your reply.
The link I send was the live one, which I improved already by upgrading to 1.9
I guess you clicked on that link after I made the improvements.

But for testing I created a page where you still can see the slow behavior.
I removed all other parts (like the google maps) to really narrow down the problem.
http://www.factfish.com/statistics/data_tables_test.php?location=47&shortcut=20

On this page with IE8 you can see the slow loading times of >30s and you will also notice that the whole browser freezes during the loading of the data.

Bernhard

allan

Thanks for the link.

Two things that will make a huge difference for you:

1. Remove all the empty TR elements that in your table for some reason (view source - there are thousands of them).

2. Enable deferred rendering with bDeferRender .

Allan

bernie4711

Hi Allen,

thanks a lot for your in depth-analysis.
It was really the problem of this empty TR elements (it was a for loop at the wrong place).
So it created 11.000 empty rows, which caused this crash of the IE.
I removed this empty rows and it loads now in no time.

So it was a (my) coding error on the server side and not a Data Tables problem.

Thanks again for pointing this out!

Bernhard