У меня есть эта страница, на которой вы можете задать некоторые критерии фильтрации, нажать кнопку фильтра, и она без проблем получит данные для вас.
все это работает просто чудесно, пока я не получу гигантский кусок html обратно. он возвращается нормально, помещает его в документ отлично, и все функции наведения и нажатия, которые я применяю к новому контенту, - все в порядке, красиво, быстро и быстро реагируют.
Проблема в том, что при огромной странице кнопка фильтра реагирует на клики в течение 4-5 секунд!
В IE 9 это нормально, в более старых версиях IE другие вещи работают медленнее, чем 9, но с ожидаемой / приемлемой скоростью.
Я сделал несколько профилей и еще много чего. я добавил кучу операторов console.log, и что интересно, оператор console.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'));
});
все эти console.logs отображаются в пределах 30 или 40 миллисекунд друг от друга. так что я ЗНАЮ, что это не что-то там, что медленно.
Другая информация:
На странице есть пара живых обработчиков, которые назначены для span.someClass (я думаю, 3). раньше было гораздо больше, но я исправил их. и это не имело большого значения в этой проблеме (хотя в целом страница стала лучше).
jquery - это версия 1.4.1 (и нет, я не могу перейти на новую версию).