Предложения по работе с ужасным механизмом доступа к Javascript / Dom в IE
Я работаю над сайтом, на котором есть страница, которая потенциально может стать очень длинной. Теоретически он может содержать более 1000 строк данных. Тогда каждая из этих строк может иметь подстроки.
В настоящее время я использую структуру список / подсписок для представления данных, потому что трудно визуализировать подмножества в таблицах. однако данные подмножества находятся в таблице.
Проблема такая: В IE. при наведении курсора на стили строк, всплывающие подсказки и другие сценарии JavaScript запускается более 5 секунд! Страница висит как сумасшедшая и практически не используется. В FF, Chrome и Safari все работает нормально.
Мне не нужна целая куча статистики о том, что IE работает медленно. Я знаю, это. мне нужно несколько предложений / теорий / идей о том, как бороться с медлительностью!
Некоторые из идей, которые у меня были до сих пор: какой-то механизм пейджинга. Но это становится сложным b / c 1. Это список, а не таблица, и 2. У него есть подсписки и подтаблицы для этих подсписок. так что нам нужно было бы каким-то образом страницы на основе верхнего уровня, я думаю. потому что мы вообще не хотим разделять данные. Думаю, это возможно ...
- какой-то механизм, который хранит контент в массиве javascript, объекте или чем-то еще и не добавляет его в dom, пока он не будет прокручен. и убирает его, когда вы прокручиваете мимо него. по идее это было бы круто. но я думаю, что было бы ужасно имплантировать.
- что-то совсем другое?
Заранее благодарим за любые идеи! Я, вероятно, попытаюсь назначить награду за это, как только смогу вдохновить вас;)
РЕДАКТИРОВАТЬ:
ОЙ! Думаю, я нашел часть проблемы, используя dyna trace! спасибо Pointy за напоминание об этом инструменте. я забыл об этом. событие щелчка одной из моих кнопок кажется безумным. вроде 2000 раз и посчитайте. что-то щелкает автоматически или что-то в этом роде. странно то, что у меня нет скриптов, которые запускают эту кнопку! РЕДАКТИРОВАТЬ: Это больше не похоже на проблему.
РЕДАКТИРОВАТЬ:
Также: я не думаю, что сложность моей разметки влияет на скорость отклика моих сценариев (я знаю, могу ли я использовать просто селекторами id было бы лучше, но я максимально оптимизировал свои селекторы и qtips (с помощью этого в прошлом). У меня есть кнопка, которая находится только на странице, а не вложена ни в что, что щелчок на регистрацию обработчика требуется 4 или 5 секунд. Дело не в том, что действие щелчка занимает много времени, это ' просто медленно, чтобы заметить, что по нему щелкнули.
РЕДАКТИРОВАТЬ: у меня было 5 промежутков, каждый из которых был вложен в промежуток без необходимости, я их не вложил, и, похоже, замедление сократилось примерно на 1/2 !! (эти 5 интервалов повторялись в каждой строке)
РЕДАКТИРОВАТЬ: Вот некоторые из соответствующих сценариев:
Обработчик основной кнопки:
$('#FilterScheduledShifts').click(function () {
var categoryId = $('#CategoryId').val();
var activityId = $('#ActivityId').val();
var shiftStatusFilters = GetShiftStatusFilterIds();
var dayOfWeekFilters = GetDayOfWeekFilters();
var startDateFilter = GetStartDateFilter();
var endDateFilter = GetStartEndFilter();
var dataToPost = {
categoryId: categoryId,
activityId: activityId,
statuses: shiftStatusFilters,
daysOfWeek: dayOfWeekFilters,
startDate: startDateFilter,
endDate: endDateFilter
};
var url = $('#UrlToFilter').val();
$('#ListHolder').html("<%=web.loading %>");
$.ajax({
url: url,
data: dataToPost,
type: 'POST',
success: function (data) {
document.getElementById('ScheduledActivityShiftListHolder').innerHTML = data;
},
error: function () {
v2ErrorNotice(v2Text.shared.genericAjaxErrorMessage);
}
});
});
Функции Get ... FIlter - это очень простые функции, которые выполняются за несколько миллисекунд ... там ничего интересного или примечательного не происходит.
этот бит добавляет часть очень медленного поведения: на других страницах реагируют красиво и быстро, на этой странице ... 2-3 секунды.
$('span.infoCard').die();
$('span.infoCard').live("mouseover", function () {
var $this = $(this);
if (!$this.data("toolTipAttached")) {
var title = '';
if ($this.attr('infoCardTitle') != "") {
title = $this.attr('infoCardTitle');
} else {
title = $this.html();
}
$this.qtip({
content: {
text: "loading",
title: title,
ajax: {
url: $this.attr('urlToGet')
// data: data,
}
},
position: {
at: 'right middle',
my: 'left top',
adjust: {
screen: 'flip'
}
},
hide: {
fixed: true,
when: 'mouseout'
},
show: {
solo: true,
delay: 500,
ready: true
},
style: {
classes: 'ui-tooltip-light InfoCardTip',
widget: true,
tip: {
corner: true,
width: 15,
height: 15
}
}
});
$this.data("toolTipAttached", true);
}
});
Есть две разные версии этого для двух разных классов, одна получает одну «смену», другая получает пользователя за несколько смен. как и с другими вещами. если сама функция работает быстро, ajax работает быстро, v2ReLoadScheduledActivitySection выполняется примерно за 50 мс. там ничего интересного. :
$('div.GetShiftUserArrow').die('click');
$('div.GetShiftUserArrow').live('click', function () {
var listIsVisible = $(this).attr('listIsVisible');
var holder = $('#' + $(this).attr('listHolder'));
var activityHolder = $('#TopLevel{0}'.format($(this).attr('activityShiftId')));
if (listIsVisible == -1) {
v2ReLoadScheduledActivitySection($(this), 1);
} else {
holder.empty().toggle('hide');
$(this).removeClass('GetShiftUserArrowOpen');
$(this).attr('listIsVisible', listIsVisible * -1);
}
});
Вот немного HTML. это
<li class="EntityRow" style="font-weight:normal;">
<div class="TopLevelRow" sectiondate="1/21/2011 12:00:00 AM">
<div class="ScheduleDayHeader OnlyFloatLeftInIE7" style="width:100%;margin-bottom:0px;font-weight:normal;">
<div class="Buttons OnlyFloatLeftInIE7" style="padding-top:0px; padding-bottom:0px;margin-top:0px;margin-bottom:0px;">
<div class="GetDayUserArrow OnlyFloatLeftInIE7" listisvisible="-1" sectiondate="1/21/2011 12:00:00 AM" url="/This/IsNot/TheReal/Url"></div>
</div><span class="CategorizedNameHolder OnlyFloatLeftInIE7" style="display:inline-block; width:380px;padding-bottom:2px;">Friday, January 21, 2011</span> <span class="TimeHolderSpan">Start</span> <span class="TimeHolderSpan">End</span> <span class="StatusIcons">Status</span> <span class="SkinnyColumn GlossaryMe" tooltip="A Number">Mn</span> <span class="SkinnyColumn GlossaryMe" tooltip="A Number">Mx</span> <span class="SkinnyColumn GlossaryMe" tooltip="A Number">BU</span> <span class=
"SkinnyColumn GlossaryMe" tooltip="A Number">Av</span> <span class="SkinnyColumn GlossaryMe" tooltip="Assigned">As</span> <span class="SkinnyColumn GlossaryMe" tooltip="A Number">Co</span>
</div>
<div class="ShiftListHolder" sectiondate="1/21/2011 12:00:00 AM">
<ul class="ScheduledActivitiesForDayList EntityList FancyList SubList">
<li class="EntityRow" activityshiftid="4645" id="ListItemFor4645">
<div class="BlueOnHover ScheduleShiftHeader" style="width:100%;">
<div class="Buttons OnlyFloatLeftInIE7" style="padding-top:0px; padding-bottom:0px;margin-top:0px;margin-bottom:0px;">
<div class="GetShiftUserArrow OnlyFloatLeftInIE7" listisvisible="-1" activityshiftid="4645" url="/Some/Url=4645" sectiondate="1/21/2011 12:00:00 AM"></div>
</div><span class="CategorizedNameHolder OnlyFloatLeftInIE7" style="display:inline-block; width:350px;padding-bottom:2px;"><span class="AssignLink" activityshiftid="4645">SomeText</span></span> <span class="TimeHolderSpan">9:00 AM</span> <span class="TimeHolderSpan">12:30 PM</span>
<div class="StatusIcons OnlyFloatLeftInIE7">
<div class='TipMe LegendMe ClassToPickTheIcon' tooltip='Min # scheduled' legendgroupid='5'>
<span class='NoDisplay'>3</span>
</div>
<div class='TipMe LegendMe OtherClassToPickTheIcon' tooltip='Unlocked' legendgroupid='5'>
<span class='NoDisplay'>2</span>
</div>
<div class='TipMe LegendMe AnotherClassToPickTheIcon' tooltip='Do not auto assign' legendgroupid='5'>
<span class='NoDisplay'>1</span>
</div>
<div class='TipMe LegendMe ClassToPickTheIconAgain' tooltip='Do not autolock' legendgroupid='5'>
<span class='NoDisplay'>1</span>
</div>
</div><span class="OnlyFloatLeftInIE7"><span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">1</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">--</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">0</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">0</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="Assigned">2</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip=
"A Number">0</span></span>
</div>
<div class="UserListHoder" id="UserListHolder4645" activityshiftid="4645"></div>
</li>
<li class="EntityRow" activityshiftid="4129" id="ListItemFor4129">
<div class="BlueOnHover ScheduleShiftHeader" style="width:100%;">
<div class="Buttons OnlyFloatLeftInIE7" style="padding-top:0px; padding-bottom:0px;margin-top:0px;margin-bottom:0px;">
<div class="GetShiftUserArrow OnlyFloatLeftInIE7" listisvisible="-1" activityshiftid="4129" url="/Some/Url=4129" sectiondate="1/21/2011 12:00:00 AM"></div>
</div><span class="CategorizedNameHolder OnlyFloatLeftInIE7" style="display:inline-block; width:350px;padding-bottom:2px;"><span class="AssignLink" activityshiftid="4129">Blah Bla blah</span></span> <span class="TimeHolderSpan">9:00 AM</span> <span class="TimeHolderSpan">5:00 PM</span>
<div class="StatusIcons OnlyFloatLeftInIE7">
<div class='TipMe LegendMe ClassToPickTheIcon' tooltip='Min # scheduled' legendgroupid='5'>
<span class='NoDisplay'>3</span>
</div>
<div class='TipMe LegendMe OtherClassToPickTheIcon' tooltip='Unlocked' legendgroupid='5'>
<span class='NoDisplay'>2</span>
</div>
<div class='TipMe LegendMe AnotherClassToPickTheIcon' tooltip='Do not auto assign' legendgroupid='5'>
<span class='NoDisplay'>1</span>
</div>
<div class='TipMe LegendMe OtherClassForIcon' tooltip='on availabilities' legendgroupid='5'>
<span class='NoDisplay'>2</span>
</div>
</div><span class="OnlyFloatLeftInIE7"><span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">1</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">5</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">0</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">0</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="Assigned">5</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip=
"A Number">0</span></span>
</div>
<div class="UserListHoder" id="UserListHolder4129" activityshiftid="4129"></div>
</li>
<li class="EntityRow" activityshiftid="3534" id="ListItemFor3534">
<div class="BlueOnHover ScheduleShiftHeader" style="width:100%;">
<div class="Buttons OnlyFloatLeftInIE7" style="padding-top:0px; padding-bottom:0px;margin-top:0px;margin-bottom:0px;">
<div class="GetShiftUserArrow OnlyFloatLeftInIE7" listisvisible="-1" activityshiftid="3534" url="/Some/Url=3534" sectiondate="1/21/2011 12:00:00 AM"></div>
</div><span class="CategorizedNameHolder OnlyFloatLeftInIE7" style="display:inline-block; width:350px;padding-bottom:2px;"><span class="AssignLink" activityshiftid="3534">even more</span></span> <span class="TimeHolderSpan">1:00 PM</span> <span class="TimeHolderSpan">4:30 PM</span>
<div class="StatusIcons OnlyFloatLeftInIE7">
<div class='TipMe LegendMe SchedulingFullyA NumberIcon' tooltip='Min # A Number' legendgroupid='5'>
<span class='NoDisplay'>4</span>
</div>
<div class='TipMe LegendMe LockedIcon' tooltip='Locked' legendgroupid='5'>
<span class='NoDisplay'>1</span>
</div>
<div class='TipMe LegendMe ClassToPickTheIconAgain' tooltip='Auto assign' legendgroupid='5'>
<span class='NoDisplay'>2</span>
</div>
<div class='TipMe LegendMe OtherClassForIcon' tooltip='on assignments' legendgroupid='5'>
<span class='NoDisplay'>3</span>
</div>
</div><span class="OnlyFloatLeftInIE7"><span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">1</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">5</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">0</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="A Number">0</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip="Assigned">7</span> <span class="SkinnyColumn TipMe ContentToolTip" tooltip=
"A Number">3</span></span>
</div>
<div class="UserListHoder" id="UserListHolder3534" activityshiftid="3534"></div>
</li>
</ul>
</div>
</div>
</li>
что-либо с TipMe или GlossaryMe вызывает всплывающую подсказку qtip.
вот так:
$(".TipMe").live("mouseover", function () {
var $this = $(this);
$this.removeAttr('title');
$this.removeAttr('alt');
if (!$this.data("toolTipAttached")) {
$this.qtip({
show: {
ready: true,
solo: true,
delay: 500
},
style: {
classes: 'ui-tooltip-light InfoCardTip',
widget: true
},
content: $this.attr('tooltip'),
position: {
at: 'bottomRight',
my: 'topleft',
adjust: {
screen: 'flip',
x: 0,
y: 0
}
},
hide: {
fixed: true,
inactive: 1000
}
});
$this.data("toolTipAttached", true);
// $this.trigger("mouseover");
}
});
Что-то мне подсказывает, что причиной проблемы могут быть все мои обработчики всплывающих подсказок ...
Дайте мне знать, если вам нужно что-нибудь еще!