ASP.Net Webforms w/ AJAX Slow Rendering - asp.net

Question

I have a Webforms, AJAX-enabled web page which, when rendering large amounts of data, is extremely slow to load in IE (we're married to IE - no other browser options). In an attempt to determine the source of the slowness, I viewed the HTML source (about 2.5 MB) and copied all of it (except for the Ajax JavaScript calls) to a blank .html file. IE renders this file MUCH faster than when the rendering happens through .Net. This seems to indicate that the AJAX JavaScript is slowing down the display of the page. Does this sound plausible? Any recommendations on improving performance here?
I've already eliminated as many UpdatePanel controls as I can from the page, but it doesn't seem to help with render time.
Thanks for the help!
Update... In the HTML source, I noticed that at the bottom of the screen, a call to WebForm_InitCallback() appears. When I executed this call directly through javascript:alert(WebForm_InitCallback());, the CPU spikes for 12 seconds before it completes! This call is here because I implemented ICallbackEventHandler to try to accomplish some traditional-style AJAX handling. Looking at WebResource.axd, that WebForm_InitCallback() method iterates through the entire form and attaches some kind of events to EVERY SINGLE textbox, checkbox, radiobutton, etc. So I guess I really need to abandon ScriptManager and UpdatePanel altogether here. Poop.
Andy

Answer 1

I hate to say this, but can you take the Microsoft AJAX out of the equation? Try it with doing an XMLHTTP request and populate the data yourself. That way at least you could step through the js and figure out if it is time on the server, time turning the resulting XML or JSON into an object, or time spent populating your data on screen.

Answer 2

This is an old topic but I thought I should share what I recently did to fix long running script error in IE 7 caused by WebForm_InitCallback.
I had a page with over 2000 form elements and in IE 7 was causing a long running script warning / browser freeze for a client. We have other pages with many more form elements and paging or other options aren't options due to needing a quick turn around to improve performance.
I narrowed it down to WebForm_InitCallback, and even further to the following line:
element = theForm.elements[i];
By saving a reference to theForm.elements instead and using it to access the index, I found significant performance gains.
var elements = theForm.elements;
for (var i = 0; i < count; i++) {
element = elements[i];
....
}
I made a jsperf to test the difference since I didn't expect such impressive gains from not calling the refinement every time.
Beyond that, I found better performance by replacing the concatenation in WebForm_InitCallbackAddField to adding the strings to an array and joining it together after the for loop in WebForm_InitCallback completes and saving it back into __theFormPostData.
Here are the original two function that you'll see in the WebResource:
function WebForm_InitCallback() {
var count = theForm.elements.length;
var element;
for (var i = 0; i < count; i++) {
element = theForm.elements[i];
var tagName = element.tagName.toLowerCase();
if (tagName == "input") {
var type = element.type;
if ((__callbackTextTypes.test(type) || ((type == "checkbox" || type == "radio") && element.checked))
&& (element.id != "__EVENTVALIDATION")) {
WebForm_InitCallbackAddField(element.name, element.value);
}
}
else if (tagName == "select") {
var selectCount = element.options.length;
for (var j = 0; j < selectCount; j++) {
var selectChild = element.options[j];
if (selectChild.selected == true) {
WebForm_InitCallbackAddField(element.name, element.value);
}
}
}
else if (tagName == "textarea") {
WebForm_InitCallbackAddField(element.name, element.value);
}
}
}
function WebForm_InitCallbackAddField(name, value) {
var nameValue = new Object();
nameValue.name = name;
nameValue.value = value;
__theFormPostCollection[__theFormPostCollection.length] = nameValue;
__theFormPostData += WebForm_EncodeCallback(name) + "=" + WebForm_EncodeCallback(value) + "&";
}
And here is the javascript I added to my page to overwrite them. It's important that this code is inserted after the WebResource is added and before WebForm_InitCallback is called.
var __theFormPostDataArr = [];
if (typeof (WebForm_InitCallback) != "undefined") {
WebForm_InitCallback = function () {
var count = theForm.elements.length;
var element;
var elements = theForm.elements;
for (var i = 0; i < count; i++) {
element = elements[i];
var tagName = element.tagName.toLowerCase();
if (tagName == "input") {
var type = element.type;
if ((type == "text" || type == "hidden" || type == "password" ||
((type == "checkbox" || type == "radio") && element.checked)) &&
(element.id != "__EVENTVALIDATION")) {
WebForm_InitCallbackAddField(element.name, element.value);
}
}
else if (tagName == "select") {
var selectCount = element.options.length;
for (var j = 0; j < selectCount; j++) {
var selectChild = element.options[j];
if (selectChild.selected == true) {
WebForm_InitCallbackAddField(element.name, element.value);
}
}
}
else if (tagName == "textarea") {
WebForm_InitCallbackAddField(element.name, element.value);
}
}
__theFormPostData = __theFormPostDataArr.join('');
}
WebForm_InitCallbackAddField = function (name, value) {
__theFormPostDataArr = [];
var nameValue = new Object();
nameValue.name = name;
nameValue.value = value;
__theFormPostCollection[__theFormPostCollection.length] = nameValue;
__theFormPostDataArr[__theFormPostDataArr.length] = WebForm_EncodeCallback(name);
__theFormPostDataArr[__theFormPostDataArr.length] = "=";
__theFormPostDataArr[__theFormPostDataArr.length] = WebForm_EncodeCallback(value);
__theFormPostDataArr[__theFormPostDataArr.length] = "&";
}
}
Ultimately, it took the run time of WebForm_InitCallback from 27 seconds to 4 seconds on my IE 7 machine.