【发布时间】：2020-01-24 12:51:15
【问题描述】：
自从我使用 jQuery 1.3+ 以来，除了一个定时测试之外的所有测试都在使用它。另一个是我在 2000 年发现的纯 JavaScript。我停止了这条路线，因为运行测试大约需要 150 秒。我已经阅读了很多与选择单个元素相关的 jQuery 优化网页。 '#id' 是使用它的最佳情况，但现在我遇到了在一个包含多个复选框列的相当大的表中检查一列中的所有复选框。
我所做的是设置一个页面，该页面创建 20,000 个表行，其中包含两个复选框列。目标是检查第二列，看看花了多长时间，然后取消选中它们，看看花了多长时间。显然我们想要最短的时间。我只使用 IE6 和 7，就我而言，我的所有用户都会这样做。
你说 20,000 行？我也是这么说的，但这将要投入生产（不在我的手中），现在改变已经太晚了。我只是想在时钟还剩 1 秒时向玛丽致敬。此外，我了解到 input.chkbox 不是最快的选择器（对于 IE7）！ :)
问题是，有没有更好的方法来做这个 jQuery 或其他方式？我希望它能够在不到半秒的时间内在我的机器上运行。
所以你不必重新输入我已经完成的所有废话这里是我想出的测试内容：
更新了 4 月 14 日上午，以包括进一步的计时赛：
<form id="form1" runat="server">
<div>
<a href="#" id="one">input[id^='chkbox'][type='checkbox']</a><br />
<a href="#" id="two">#myTable tr[id^='row'] input[id^='chkbox'][type='checkbox']</a><br />
<a href="#" id="three">#myTable tr.myRow input[id^='chkbox'][type='checkbox']</a><br />
<a href="#" id="four">tr.myRow input[id^='chkbox'][type='checkbox']</a><br />
<a href="#" id="five">input[id^='chkbox']</a><br />
<a href="#" id="six">.chkbox</a><br />
<a href="#" id="seven">input.chkbox</a><br />
<a href="#" id="eight">#myTable input.chkbox</a><br />
<a href="#" id="nine">"input.chkbox", "tr"</a><br />
<a href="#" id="nine1">"input.chkbox", "tr.myRow"</a><br />
<a href="#" id="nine2">"input.chkbox", "#form1"</a><br />
<a href="#" id="nine3">"input.chkbox", "#myTable"</a><br />
<a href="#" id="ten">input[name=chkbox]</a><br />
<a href="#" id="ten1">"input[name=chkbox]", "tr.myRow"</a><br />
<a href="#" id="ten2">"input[name=chkbox]", "#form1"</a><br />
<a href="#" id="ten3">"input[name=chkbox]", "#myTable"</a><br />
<a href="#" id="ten4">"input[name=chkbox]", $("#form1")</a><br />
<a href="#" id="ten5">"input[name=chkbox]", $("#myTable")</a><br />
<a href="#" id="eleven">input[name='chkbox']:checkbox</a><br />
<a href="#" id="twelve">:checkbox</a><br />
<a href="#" id="twelve1">input:checkbox</a><br />
<a href="#" id="thirteen">input[type=checkbox]</a><br />
<div>
<input type="text" id="goBox" /> <button id="go">Go!</button>
<div id="goBoxTook"></div>
</div>
<table id="myTable">
<tr id="headerRow"><th>Row #</th><th>Checkboxes o' fun!</th><th>Don't check these!</th></tr>
<% for(int i = 0; i < 20000;i++) { %>
<tr id="row<%= i %>" class="myRow">
<td><%= i %> Row</td>
<td>
<input type="checkbox" id="chkbox<%= i %>" name="chkbox" class="chkbox" />
</td>
<td>
<input type="checkbox" id="otherBox<%= i %>" name="otherBox" class="otherBox" />
</td>
</tr>
<% } %>
</table>
</div>
<script type="text/javascript" src="<%= ResolveUrl(" ~/") %>Javascript/jquery.1.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
function run(selectorText, el) {
var start = new Date();
$(selectorText).attr("checked", true);
var end = new Date();
var timeElapsed = end - start;
$(el).after("<br />Checking Took " + timeElapsed + "ms");
start = new Date();
$(selectorText).attr("checked", false);
end = new Date();
timeElapsed = end - start;
$(el).after("<br />Unchecking Took " + timeElapsed + "ms");
}
function runWithContext(selectorText, context, el) {
var start = new Date();
$(selectorText, context).attr("checked", true);
var end = new Date();
var timeElapsed = end - start;
$(el).after("<br />Checking Took " + timeElapsed + "ms");
start = new Date();
$(selectorText, context).attr("checked", false);
end = new Date();
timeElapsed = end - start;
$(el).after("<br />Unchecking Took " + timeElapsed + "ms");
}
$("#one").click(function () {
run("input[id^='chkbox'][type='checkbox']", this);
});
$("#two").click(function () {
run("#myTable tr[id^='row'] input[id^='chkbox'][type='checkbox']", this);
});
$("#three").click(function () {
run("#myTable tr.myRow input[id^='chkbox'][type='checkbox']", this);
});
$("#four").click(function () {
run("tr.myRow input[id^='chkbox'][type='checkbox']", this);
});
$("#five").click(function () {
run("input[id^='chkbox']", this);
});
$("#six").click(function () {
run(".chkbox", this);
});
$("#seven").click(function () {
run("input.chkbox", this);
});
$("#eight").click(function () {
run("#myTable input.chkbox", this);
});
$("#nine").click(function () {
runWithContext("input.chkbox", "tr", this);
});
$("#nine1").click(function () {
runWithContext("input.chkbox", "tr.myRow", this);
});
$("#nine2").click(function () {
runWithContext("input.chkbox", "#form1", this);
});
$("#nine3").click(function () {
runWithContext("input.chkbox", "#myTable", this);
});
$("#ten").click(function () {
run("input[name=chkbox]", this);
});
$("#ten1").click(function () {
runWithContext("input[name=chkbox]", "tr.myRow", this);
});
$("#ten2").click(function () {
runWithContext("input[name=chkbox]", "#form1", this);
});
$("#ten3").click(function () {
runWithContext("input[name=chkbox]", "#myTable", this);
});
$("#ten4").click(function () {
runWithContext("input[name=chkbox]", $("#form1"), this);
});
$("#ten5").click(function () {
runWithContext("input[name=chkbox]", $("#myTable"), this);
});
$("#eleven").click(function () {
run("input[name='chkbox']:checkbox", this);
});
$("#twelve").click(function () {
run(":checkbox", this);
});
$("#twelve1").click(function () {
run("input:checkbox", this);
});
$("#thirteen").click(function () {
run("input[type=checkbox]", this);
});
$('#go').click(function () {
run($('#goBox').val(), this);
});
});
</script>
</form>
【问题讨论】：
-
我的意思不是无益，但是一页中的 20k 行只是糟糕的设计。你应该解决这个问题。 :)
-
嗯...不开玩笑。 :) 我没有这样做！现在没有足够的时间来为这个版本修复它。这将是下一个版本中要做的第一件事。到目前为止，这个项目带来了许多“有趣”的挑战。
标签： javascript jquery performance