带有 AJAX 慢速渲染的 ASP.Net Webforms

Question

我有一个 Webforms，启用 AJAX 的网页，当呈现大量数据时，在 IE 中加载非常慢（我们与 IE 结婚 - 没有其他浏览器选项）。为了确定缓慢的原因，我查看了 HTML 源代码（大约 2.5 MB）并将其全部（除了 Ajax JavaScript 调用）复制到一个空白的 .html 文件中。 IE 渲染这个文件比通过 .Net 渲染要快得多。这似乎表明 AJAX JavaScript 正在减慢页面的显示速度。这听起来合理吗？有什么关于提高性能的建议吗？

我已经从页面中删除了尽可能多的 UpdatePanel 控件，但它似乎对渲染时间没有帮助。

感谢您的帮助！

更新... 在 HTML 源代码中，我注意到屏幕底部出现了对 WebForm_InitCallback() 的调用。当我直接通过 javascript:alert(WebForm_InitCallback()); 执行此调用时，CPU 在完成前会出现 12 秒的峰值！这个调用在这里是因为我实现了 ICallbackEventHandler 来尝试完成一些传统风格的 AJAX 处理。查看 WebResource.axd，WebForm_InitCallback() 方法遍历整个表单并将某种事件附加到每个文本框、复选框、单选按钮等。所以我想我真的需要在这里完全放弃 ScriptManager 和 UpdatePanel。便便。

安迪

Answer 1

我不想这么说，但是你能把 Microsoft AJAX 排除在外吗？尝试执行 XMLHTTP 请求并自己填充数据。这样，至少您可以单步执行 js 并确定是在服务器上的时间、将生成的 XML 或 JSON 转换为对象的时间，还是在屏幕上填充数据所花费的时间。

Answer 2

这是一个老话题，但我想我应该分享一下我最近为修复 IE 7 中由 WebForm_InitCallback 引起的长时间运行脚本错误所做的工作。

我有一个包含 2000 多个表单元素的页面，并且在 IE 7 中导致客户端长时间运行脚本警告/浏览器冻结。我们还有其他页面，其中包含更多表单元素，并且由于需要快速转身以提高性能，因此分页或其他选项不是选项。

我将其缩小到 WebForm_InitCallback，甚至更进一步到以下行：

element = theForm.elements[i];

通过保存对 theForm.elements 的引用并使用它来访问索引，我发现了显着的性能提升。

var elements = theForm.elements;
for (var i = 0; i < count; i++) {
    element = elements[i];
    ....
}

我创建了一个jsperf 来测试差异，因为我没想到每次不调用改进都会有如此令人印象深刻的收益。

除此之外，通过将 WebForm_InitCallbackAddField 中的串联替换为将字符串添加到数组中，并在 WebForm_InitCallback 中的 for 循环完成后将其连接在一起并将其保存回 __theFormPostData，我发现了更好的性能。

这是您将在 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) + "&";
}

这是我添加到页面以覆盖它们的 javascript。请务必在添加 WebResource 之后、调用 WebForm_InitCallback 之前插入此代码。

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] = "&";
    }
}

最终，WebForm_InitCallback 在我的 IE 7 机器上的运行时间从 27 秒缩短到了 4 秒。