我正在开发一个页面可能会变得很长的网站。理论上它可以包含1000多行数据。然后这些行可以都有子行。
我目前正在使用列表/子列表结构来表示数据，因为很难在表格中显示子集。但子集数据在表格中。
问题在于：在IE中。我徘徊在行样式，工具提示和其他javascripts上需要花费5秒钟才能开火！这个页面像疯了一样挂起，几乎无法使用。在FF，Chrome和Safari中它运行得很好。
我不需要一大堆统计数据，说IE很慢。我知道它是。我需要的是关于如何对抗缓慢的一些建议/理论/想法！
到目前为止，我有过一些想法： - 一种分页机制。但这很棘手b / c 1.这是一个列表而不是表，2。它有子子列表和子列表的子表。所以我们需要以某种方式基于我认为的顶级页面。因为我们根本不想分割数据。我想这可能是可行的......
- 一种将内容保存在javascript数组或对象或soomething中的机制，并且在滚动到dom之前不会将其添加到dom中。当你滚过它时把它带走。理论上这很酷。但我认为恭维是可怕的。
- 还有其他什么吗？
预先感谢任何想法！一旦我能帮助激励你，我可能会尝试为此付出代价;）
编辑：
哦，我的！我想我可能已经使用动态追踪找到了部分问题！感谢Pointy提醒我这个工具。我忘记了。我的一个按钮的点击事件似乎是疯狂的金额。像2000次和数。有些东西是自动点击它或类似的东西。奇怪的是，我没有任何触发按钮点击的javascripts！编辑：这似乎不再是一个问题。
编辑：
另外：我不认为我的标记的复杂性会影响我的脚本的响应性（我知道如果我只使用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);
}
});
对于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 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").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");
}
});
有些东西告诉我可能是我的所有工具提示处理程序导致问题......
如果你们还想要别的，请告诉我们！
答案 0 :(得分：7)
“我认为 标记的复杂性不会影响我的脚本的响应能力”
错误的假设是头脑中最糟糕的领导者。这很有趣，因为你也说过：
“这一点非常缓慢，在其他页面，他们会在此页面上做出反应美好而快速 ... ... 2-3秒。 “
“我有5个跨度，每个嵌套在一个不必要的，我没有嵌套那些，它似乎削减了缓慢大约1/2 !!（这5个跨度在每一行都重复）“
你去吧。 ：）
您可以尝试将 live 处理程序更改为 delegate 。它们之间的主要区别在于 live 将 The Handler 附加到文档中，而在 delegate 的情况下可以指定附加它的位置。我认为这可能是引爆点。另请尝试 mouseenter ，它会频繁触发 less 。
$('#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...
}
});
让我知道他们是否有任何帮助！ ：）
答案 1 :(得分：5)
很难在不知道代码是什么的情况下给出具体答案。
如果您只是在悬停时进行一些样式更改，那么我建议您使用CSS而不是javascript来完成它。
:hover伪选择器不适用于IE6中的<tr>，但它可以在其他浏览器中使用。
#myTable tr:hover {
background: yellow;
}
对于那些需要javascript的项目，我们真的需要查看代码以了解它为什么慢。听起来你可能正在做不必要的DOM选择。
即使可以通过分页或类似的方法来提高性能以减小大小，也可能是因为你仍然有一些低效的代码应该收紧一些。
答案 2 :(得分：1)
您可以考虑使用jQuery选择器来执行您正在执行的任何操作。我肯定会研究一种分页机制。在某一点上，你在渲染引擎上抛出的HTML数量就成了问题。
答案 3 :(得分：0)
查看无限滚动jquery插件。这不会解决IE本身的性能问题，但会允许您尝试一些没有分页符的分页技术，看看它是否可以作为解决方案。
答案 4 :(得分：0)
一些真正的标记会有所帮助，我假设你有类似的东西（至少作为结构的轮廓。）
<div class="list">
<div id="item1">list html here</div>
<div id="item2">list html here</div>
<div id="item3">list html here</div>
.
.
.
<div id="item999990">list html here</div>
</div>
问题在于扫描那么多项目的列表非常慢。
是否有办法在标记中按顺序打破列表，即使没有以图形方式显示。
所以
<div class="list">
<div id="cat1">
<div id="item1">list html here</div>
<div id="item2">list html here</div>
<div id="item3">list html here</div>
.
.
.
<div id="item120">list html here</div>
</div>
.
.
.
<div id="cat97">
<div id="item99904">list html here</div>
<div id="item99905">list html here</div>
<div id="item99906">list html here</div>
.
.
.
<div id="item999990">list html here</div>
</div>
</div>
通过这种方式，每个级别下的项目下的扫描都是小得多的集合。我没有看到你的确切问题，这可能是不可能的，但如果你能做到这样的事情，那么选择者的寻求时间应该会大大改善。
答案 5 :(得分：0)
如果你的javascript在IE中运行时会占用大量内存，那可能会减慢速度。通过查看Windows任务管理器中的iexplore.exe进程来检查内存消耗。如果事实证明IE使用了大量内存，请尝试优化代码。特别要寻找：
您可能尝试的另一件事是使用document.querySelector在IE8 / IE9 / chrome / firefox（或element.querySelector）中找到没有ID的元素。 IE7用户将不得不受到影响，但这就是你没有升级的结果！ ; - ）