IE8 A script on this page is causing your web browser to run slowly
IE8 A script on this page is causing your web browser to run slowly
abc123
Posts: 4Questions: 0Answers: 0
DataTables -> 1.9.4
jQuery -> 1.8.2
jQuery UI -> 1.10.0
[code]
.dataTable({
"iDisplayLength": 25,
"bJQueryUI": true,
"sDom": '<"H"fri>t<"F"p>',
"aaSorting": [[2, "desc"]],
"sPaginationType": "full_numbers",
"bDeferRender": true,
"aoColumns": [
//columns defined
]
});
[/code]
There are 11,238 rows for this specific AJAX request. Which then creates an array of arrays to pass in the table using:
[code]
oTable.fnAddData(data);
[/code]
Full Code:
[code]
success: function (msg) {
var data = [];
var i = 0;
var start = new Date().getTime();
$.map(msg.d, function (item) {
var items = [];
var img;
if (item.ProcessorDesrp == "Vital") {
img = '';
} else {
img = '';
}
items.push(
i,
img,
item.Date,
item.RefNumLink,
item.NACHACompanyBatchHeaderID,
item.Amount,
item.RountingTransNum,
item.AccountNumberLink,
item.TransDescription,
item.ProcessorDesrp,
item.NACHAFileHeaderID,
item.RefNumber);
data.push(items);
i++;
});
var end = new Date().getTime();
var time = end - start;
console.log('Execution time: ' + time);
start = new Date().getTime();
oTable.fnAddData(data);
end = new Date().getTime();
time = end - start;
console.log('Execution time: ' + time);
}
[/code]
In Chrome creating the array of arrays takes 3ms and the datatable part takes 384ms.
In IE8 creating the array of arrays takes 68ms abd tge datatable part takes 6100-6500ms.
The time obviously isn't enough for any error messages however, since IE doesn't use time it instead uses the following:
[quote]As of Internet Explorer 4.0 and later versions, the time-out is no longer a fixed value based on Windows messages. Internet Explorer now tracks the total number of executed script statements and resets the value each time that a new script execution is started, such as from a timeout or from an event handler, for the current page with the script engine. Internet Explorer displays a "long-running script" dialog box when that value is over a threshold amount. Internet Explorer doesn’t check on each instruction to see if it is over the limit. Periodically the script engine polls Internet Explorer with the number of statements executed and Internet Explorer checks if that is over the limit. Because of this mechanism, it is possible to execute more than the default limit without the dialog if the entire script execution finishes before the script engine polls Internet Explorer.[/quote]
Taken from http://support.microsoft.com/kb/175500
Is there anyway to break up the execution loops for DataTables as to make it not trigger this event?
A solution can be found here: http://stackoverflow.com/questions/4460263/disabling-the-long-running-script-message-in-internet-explorer
But I don't want a custom version of DataTables, I am happy to find the tightly nested loops and break them up with these fixes to solve this once and for all.
jQuery -> 1.8.2
jQuery UI -> 1.10.0
[code]
.dataTable({
"iDisplayLength": 25,
"bJQueryUI": true,
"sDom": '<"H"fri>t<"F"p>',
"aaSorting": [[2, "desc"]],
"sPaginationType": "full_numbers",
"bDeferRender": true,
"aoColumns": [
//columns defined
]
});
[/code]
There are 11,238 rows for this specific AJAX request. Which then creates an array of arrays to pass in the table using:
[code]
oTable.fnAddData(data);
[/code]
Full Code:
[code]
success: function (msg) {
var data = [];
var i = 0;
var start = new Date().getTime();
$.map(msg.d, function (item) {
var items = [];
var img;
if (item.ProcessorDesrp == "Vital") {
img = '';
} else {
img = '';
}
items.push(
i,
img,
item.Date,
item.RefNumLink,
item.NACHACompanyBatchHeaderID,
item.Amount,
item.RountingTransNum,
item.AccountNumberLink,
item.TransDescription,
item.ProcessorDesrp,
item.NACHAFileHeaderID,
item.RefNumber);
data.push(items);
i++;
});
var end = new Date().getTime();
var time = end - start;
console.log('Execution time: ' + time);
start = new Date().getTime();
oTable.fnAddData(data);
end = new Date().getTime();
time = end - start;
console.log('Execution time: ' + time);
}
[/code]
In Chrome creating the array of arrays takes 3ms and the datatable part takes 384ms.
In IE8 creating the array of arrays takes 68ms abd tge datatable part takes 6100-6500ms.
The time obviously isn't enough for any error messages however, since IE doesn't use time it instead uses the following:
[quote]As of Internet Explorer 4.0 and later versions, the time-out is no longer a fixed value based on Windows messages. Internet Explorer now tracks the total number of executed script statements and resets the value each time that a new script execution is started, such as from a timeout or from an event handler, for the current page with the script engine. Internet Explorer displays a "long-running script" dialog box when that value is over a threshold amount. Internet Explorer doesn’t check on each instruction to see if it is over the limit. Periodically the script engine polls Internet Explorer with the number of statements executed and Internet Explorer checks if that is over the limit. Because of this mechanism, it is possible to execute more than the default limit without the dialog if the entire script execution finishes before the script engine polls Internet Explorer.[/quote]
Taken from http://support.microsoft.com/kb/175500
Is there anyway to break up the execution loops for DataTables as to make it not trigger this event?
A solution can be found here: http://stackoverflow.com/questions/4460263/disabling-the-long-running-script-message-in-internet-explorer
But I don't want a custom version of DataTables, I am happy to find the tightly nested loops and break them up with these fixes to solve this once and for all.
This discussion has been closed.
Replies
DataTable Creation:
[code]oTable = $("#ACHResults")
.bind('page', function () { PageChanged(); })
.dataTable({
"iDisplayLength": 25,
"bJQueryUI": true,
"sDom": '<"H"fri>t<"F"p>',
"aaSorting": [[2, "desc"]],
"sPaginationType": "full_numbers",
"bDeferRender": true,
"bProcessing": true,
"aoColumns": [
//Columns
]
});[/code]
Function to get ajax data:
[code]function UpdateACHTable() {
oTable.fnClearTable();
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "a/url",
dataType: 'json',
data: {
//some data
},
success: function(msg) {
var chunks = msg.d.length / 1000;
var split = [];
var busy = false;
//Breaks data into multiple smalled chunks of 1000
for (var i = 0; i < chunks; i++) {
split.push(msg.d.splice(0, 1000));
}
var count = 0;
//Uses a Timer to add the data to the table 1000 at a time this will give IE a millisecond here and there to reset the 5,000,000 execution issue.
var processor = setInterval(function() {
if(!busy)
{
busy = true;
Process(split[count]);
if(++count == split.length)
{
clearInterval(processor);
oTable.fnDraw();
}
busy = false;
}
}, 100);
},
error: function(jqXhr, textStatus, errorThrown) {
if (!window.console) {
console.log("jqXHR: " + jqXhr);
console.log(jqXhr);
console.log("textStatus: " + textStatus);
console.log("errorThrown: " + errorThrown);
}
}
});
}[/code]
Function to add data to the table
[code]function Process(data) {
oTable.fnAddData(data, false);
}[/code]
I'd like this to be an option built into Datatables....
oSettings.IntervalProcessing = true;
oSettings.SplitSize = 1000;
Allan
I love you :), also might want the IntervalTime setting since 100ms might want to be editted by the user. Detection of browser would also be nice....but these are all just words...the important ones are "I love you." :)
great solution!!!!!