我正在开发一个页面可能会变得很长的网站.理论上它可以包含1000行数据.然后这些行可以各自具有子行.
我目前正在使用列表/子列表结构来表示数据,因为很难在表中可视化子集.然而,子集数据在表中.
问题是这样的：在IE中.我徘徊在行样式,工具提示和其他javascripts上需要花费5秒钟才能开火！这个页面像疯了一样挂起,几乎无法使用.在FF,Chrome和Safari中它运行得很好.
我不需要一大堆统计数据,说IE很慢.我知道它是.我需要的是关于如何对抗缓慢的一些建议/理论/想法！
到目前为止我的一些想法：
– 一种分页机制.但这很棘手b / c 1.这是一个列表而不是表,2.它有子列表和子列表的子表.所以我们需要以某种方式基于我认为的顶级页面.因为我们根本不想分割数据.我猜这可能是可行的……
– 一种将内容保存在javascript数组或对象或soomething中的机制,并且在滚动到dom之前不会将其添加到dom中.当你滚过它时把它带走.理论上这很酷.但我认为恭维是可怕的.
– 还有其他什么吗？
在此先感谢任何想法！一旦我能够帮助激励你,我可能会尝试对此给予赏金;)
编辑：
天啊！我想我可能已经使用dyna trace找到了部分问题！感谢Pointy提醒我这个工具.我忘记了.我的一个按钮的点击事件似乎是疯狂的金额.像2000次和数.有些东西是自动点击它或类似的东西.奇怪的是,我没有任何触发按钮点击的javascripts！编辑：这似乎不再是一个问题.
编辑：
另外：我不认为我的标记的复杂性会影响我的脚本的响应性(我知道如果我只使用id选择器,那将是最好的,但我已经尽可能地优化了我的选择器和qtips (在过去的帮助下).我有一个只在页面上的按钮,而不是嵌套在任何东西中,点击处理程序需要4或5秒才能注册.这不是点击动作需要很长时间,它是只是很慢地注意到它被点击了.
编辑：我有5个跨度,每个跨越不必要地嵌套在一个跨度,我un-nested那些,它似乎已经减少约1/2的速度！ (这五个跨度在每一行重复)
编辑：这是一些相关的脚本：
主按钮处理程序：
$('#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);
}
});
对于2个不同的类有2个不同的版本,一个获得单个“shift”,一个获得用户的一堆班次.和其他事情一样.一旦函数本身快速运行,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,但它往往在1-10之间.
<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
},widget: true
},content: $this.attr('tooltip'),position: {
at: 'bottomRight',my: 'topleft',adjust: {
screen: 'flip',x: 0,y: 0
}
},inactive: 1000
}
});
$this.data("toolTipAttached",true);
// $this.trigger("mouSEOver");
}
});
有些东西告诉我可能是我的所有工具提示处理程序导致问题……
如果你们想要别的什么,请告诉我！
解决方法
“I don’t think it is the complexity of my markup that is affecting the responsiveness of my scripts”
错误的假设是头脑中最糟糕的领导者.这很有趣,因为你也说过：
“this bit attaches some of the behavIoUr that is very slow,in other pages they react nice and quick,on this page… 2-3 seconds.”
“i had 5 spans that were each nested in a span unnecessarily,i un-nested those and it seems to have cut the slowness in about 1/2!! (these 5 spans were repeated in every row)”
你去吧:)
您可以尝试将live处理程序更改为delegate.它们之间的主要区别在于,将Handler附加到文档,而在委托的情况下,您可以指定附加它的位置.我认为这可能是临界点.同时尝试mouseenter,其频率较低.
$('#ROOT').delegate(".infoCard","mouseenter",function () { ... })
root可以是任何元素,具体取决于您的网站.您可以尝试父< ul>例如.
另一件要尝试的是使用自己的处理程序(但是你不能使用mouseenter)：
$("#ROOT").mouSEOver(function (e) {
var $this = $(e.target);
if ($this.hasClass('TipMe')) {
// TipMe code...
} else if ($this.hasClass('infoCard')) {
// infoCard code...
}
});
让我知道他们是否有任何帮助！ 原文链接：https://www.f2er.com/js/158959.html
