Блог

У меня есть эта страница, на которой вы можете задать некоторые критерии фильтрации, и вы нажимаете кнопку фильтра, и она автоматически получает данные для вас.

все это работает просто замечательно, пока я не получу обратно ГИГАНТСКИЙ кусок html. он возвращается нормально, помещает его в документ нормально, и все функции наведения курсора и щелчка, которые я применяю к новому контенту, являются a-ok, приятными, быстрыми и отзывчивыми.

Проблема в том, что при наличии огромной страницы кнопке фильтра требуется 4-5 секунд, чтобы отреагировать на клики!

В IE 9 все в порядке, в более старых версиях IE другие функции работают медленнее, чем 9, но с ожидаемой / приемлемой скоростью.

Я выполнил некоторое профилирование и еще много чего. я добавил кучу консольных.регистрируйте инструкции, и, что интересно, консоль.инструкция log в самом начале функции регистрируется в течение 4-5 секунд после нажатия кнопки! что еще интереснее, если я помещаю предупреждение в первую строку, оно срабатывает мгновенно! и если я добавлю оповещение позже в обработчик кликов, все, что предшествует оповещению, срабатывает мгновенно, но все, что происходит после, откладывается.

в обработчике не так много происходит, как только он решает распознать, что на него нажали, это происходит очень быстро:

     $('#FilterScheduledShifts').click(function () {

        console.log("Filter Start:"   new Date().getTime());

        var categoryId = $('#FilterCategoryId').val();
        var activityId = $('#FilterActivityId').val();
        console.log("Before GetShiftStatusFilters:"   new Date().getTime());
        var shiftStatusFilters = v2GetShiftStatusFilterIds();
        console.log("After GetShiftStatusFilters:"   new Date().getTime());
        var dayOfWeekFilters = v2GetDayOfWeekFilters();
        console.log("After v2GetDayOfWeekFilters:"   new Date().getTime());
        var startDateFilter = v2GetStartDateFilter();
        console.log("After v2GetStartDateFilter:"   new Date().getTime());
        var endDateFilter = v2GetStartEndFilter();
        console.log("After v2GetStartEndFilter:"   new Date().getTime());

        if (Date.parse(startDateFilter).isBeforeOrEqual(Date.parse(endDateFilter))) {
            console.log("inside if statement:"   new Date().getTime());

            var dataToPost = { categoryId: categoryId, activityId: activityId, statuses: shiftStatusFilters, daysOfWeek: dayOfWeekFilters, startDate: startDateFilter, endDate: endDateFilter };
            var url = $('#UrlToFilter').val();

            $('#holder').empty().html($('#LoadingScreen').clone());
            console.log("after emptyand loadingscreen:"   new Date().getTime());
            $.ajax({
                url: url,
                data: dataToPost,
                type: 'POST',
                success: function (data) {
                console.log("success:"   new Date().getTime());
                    document.getElementById('holder').innerHTML = data;
                    v2WireUpGetUsersForAllShiftsArrow();
                    v2SetUpGetShiftUserArrow($('#holder').find('div.GetShiftUserArrow'));
                    v2SetUpGetDayShiftsUsers($('#holder').find('div.GetDayUserArrow'));
                    v2SetUpAssingVolunteersLinks($('#holder'));
                },
                error: function () {
                    v2ErrorNotice(v2Text.shared.genericAjaxErrorMessage);
                }

            });
        }
        else {
            v2ErrorNotice('error');
        }
    });

    v2SetUpGetShiftUserArrow($('#holder').find('div.GetShiftUserArrow'));
    v2SetUpGetDayShiftsUsers($('#holder').find('div.GetDayUserArrow'));

});
  

все эти консоли.журналы отображаются с интервалом в 30 или 40 миллисекунд друг от друга. итак, я ЗНАЮ, что там не что-то медленное.

Другая информация:

на странице есть пара живых обработчиков, которым присвоен span.SomeClass (я думаю, 3). раньше было намного больше, но я их исправил. и это не сильно повлияло на эту проблему (хотя в целом страница стала лучше).

jquery имеет версию 1.4.1 (и нет, я не могу перейти на новую версию).

Я заметил, что если у вас открыт firebug, особенно вкладка HTML, может произойти огромная потеря производительности при манипулировании или загрузке DOM. Закройте firebug и посмотрите, улучшится ли производительность.