Performance Issues with IE 8 Render even with Ajax + DeferRender (Part 1)

layda7

Hi,

I have search and read through the forums about IE8 performance issues but still managed to run into it with DeferRender and AJAX; so here goes:
My data is currently approximately somewhere between 300 rows - 1800 rows x 27 columns; However, since I am using DeferRender, there is approximately 24 - 25 rows x 27 columns visible in a single view in any given time. In addition, I also noticed that the page size is reduced considerably (from 3 - 6 MB to 120 KB). DataTable is doing a fantastic job in keeping the page size small.

The issue is that on first load, data row of 600 rows x 27 columns, there seems to be quite a lot of processing on the client side that it causes the browser to freeze - a good 15+ seconds on IE8. Basically, running into the same issues as I was when doing server side. Please also note that the table contains HyperLinks, Clickable Text (Span) and some Text and Cell formatting.

I've copied my settings below; I do apologise as I have to mask the column names as they are quite sensitive.

aoColumn:
[code]
var cols = [
{ "mDataProp": "col1" },
{ "mDataProp": "col2", "bVisible": false, "bSearchable": false },
{ "mDataProp": "col3", "sClass": "pointer" },
{ "mDataProp": "col4", "bVisible": false, "bSearchable": false },
{ "mDataProp": "col5", "sClass": "pointer" },
{ "mDataProp": "col6", "bSearchable": false },
{ "mDataProp": "col7", "bVisible": false, "bSearchable": false },
{ "mDataProp": "col8", "bSearchable": false },
{ "mDataProp": "col9", "bVisible": false, "bSearchable": false },
{ "mDataProp": "col10", "sClass": "pointer", "bSearchable": false },
{ "mDataProp": "col11", "bSearchable": false},
{ "mDataProp": "col12", "bSearchable": false, "bVisible": (viewOne == "0" ) ? false : true },
{ "mDataProp": "col13", "bSearchable": false },
{ "mDataProp": "col14", "bSearchable": false, "bVisible": (viewOne == "0") ? false : true },
{ "mDataProp": "col15", "bSearchable": false },
{ "mDataProp": "col16", "bSearchable": false },
{ "mDataProp": "col17", "bSearchable": false },
{ "mDataProp": "col18", "bSearchable": false },
{ "mDataProp": "col19", "bSearchable": false },
{ "mDataProp": "col20", "bSearchable": false },
{ "mDataProp": "col21", "bSearchable": false },
{ "mDataProp": "co22", "bSearchable": false },
{ "mDataProp": "col23", "bSearchable": false },
{ "mDataProp": "col24", "bSearchable": false, "sClass": "NumericValue" },
{ "mDataProp": "col25", "bSearchable": false, "bVisible": (viewOne == "0") ? false : true },
{ "mDataProp": "col26", "bSearchable": false, "sClass": "NumericValue" },
{ "mDataProp": "col27", "bSearchable": false, "bVisible" : false },
{ "mDataProp": "col28", "bSearchable": false }
]
[/code]

aoColumnDef:
[code]
var colsdef = [
{
"fnRender": function (o, val) {
return "" + o.aData["col1"] + "";
},
"bUseRendered": false,
"aTargets": [0]
},
{
"fnRender": function (o, val) {
return "" + o.aData["col3"] + "";
},
"bUseRendered": false,
"aTargets": [2]
},
{
"fnRender": function (o, val) {
return "" + o.aData['col6'] + "";
},
"bUseRendered": false,
"aTargets": [4]
},
{
"fnRender": function (o, val) {
return "" + o.aData['col9'] + "";
},
"aTargets": [9]
},
{
"fnRender" : function (o, val) {
return "" + o.aData['col10'] + "";
},
"bUseRendered": false,
"aTargets" : [10]
},
{
"fnRender" : function (o, val) {
return "" + o.aData['col14'] + "";
},
"bUseRendered": false,
"aTargets": [14]
},
{
"fnRender": function (o, val) {
return "" + o.aData['col15'] + "";
},
"bUseRendered": false,
"aTargets": [15]
},
{
"fnRender": function (o, val) {
return "" + o.aData['col16'] + "";
},
"bUseRendered": false,
"aTargets": [16]
},
{
"fnRender": function (o, val) {
return "" + o.aData['col17'] + "";
},
"bUseRendered": false,
"aTargets": [17]
},
{
"fnRender": function (o, val) {
return "" + o.aData['col18'] + "";
},
"bUseRendered": false,
"aTargets": [18]
},
{
"fnRender": function (o, val) {
return "" + o.aData['col19'] + "";
},
"bUseRendered": false,
"aTargets": [19]
},
{
"fnRender": function (o, val) {
return "ViewAdd" + o.aData['daysSinceLastReview'] + "";
},
"bUseRendered": false,
"aTargets": [27]
}
]
[/code]

(See Part 2)
Thanks.

Daniel