ASP.Net Webforms с медленной визуализацией AJAX - PullRequest
0 голосов
/ 02 марта 2010

У меня есть веб-форма, веб-страница с поддержкой AJAX, которая при рендеринге больших объемов данных очень медленно загружается в IE (мы женаты на IE - других вариантов браузера нет). Пытаясь определить источник медлительности, я просмотрел исходный HTML-код (около 2,5 МБ) и скопировал все это (кроме вызовов Ajax JavaScript) в пустой файл .html. IE рендерит этот файл НАМНОГО быстрее, чем когда рендеринг происходит через .Net. Похоже, это указывает на то, что AJAX JavaScript замедляет отображение страницы. Это звучит правдоподобно? Любые рекомендации по улучшению производительности здесь?

Я уже удалил со страницы как можно больше элементов управления UpdatePanel, но, похоже, это не помогает со временем рендеринга.

Спасибо за помощь!

Обновить ... В источнике HTML я заметил, что в нижней части экрана появляется вызов WebForm_InitCallback (). Когда я выполнял этот вызов напрямую через javascript: alert (WebForm_InitCallback ()); ЦП всплеснул на 12 секунд, прежде чем он завершится! Этот вызов здесь, потому что я реализовал ICallbackEventHandler, чтобы попытаться выполнить некоторую традиционную обработку AJAX. Глядя на WebResource.axd, этот метод WebForm_InitCallback () выполняет итерацию по всей форме и присоединяет какие-то события к КАЖДОМУ ОДНОМУ текстовому полю, флажку, кнопке радио и т.д. Полуют.

Andy

Ответы [ 2 ]

1 голос
/ 20 января 2013

Это старая тема, но я подумал, что мне следует поделиться тем, что я недавно сделал, чтобы исправить ошибку долго работающего скрипта в 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 на добавление строк в массив и соединение его после завершения цикла for в WebForm_InitCallback и сохранения его обратно в __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 секунд.

1 голос
/ 02 марта 2010

Мне неприятно это говорить, но вы можете вывести Microsoft AJAX из уравнения? Попробуйте выполнить XMLHTTP-запрос и заполнить данные самостоятельно. Таким образом, по крайней мере, вы могли бы пройтись по js и выяснить, настало ли время на сервере, время превращения получающегося XML или JSON в объект или время, затраченное на заполнение ваших данных на экране.

...