Da ich jQuery 1.3+ verwende, verwenden alle bis auf einen zeitlich begrenzten Test das. Der andere ist einfaches Javascript, das ich im Jahr 2000 gefunden habe. Ich habe aufgehört, diesen Weg zu gehen, da es rund 150 Sekunden dauerte, um den Test auszuführen. Ich habe einige jQuery-Optimierungs-Webseiten gelesen, die sich auf die Auswahl eines einzelnen Elements beziehen. Eine '#id' ist der beste Fall für die Verwendung, aber jetzt habe ich das Problem der Ankreuzen aller Kästchen in einer Spalte in einer relativ großen Tabelle mit mehreren Kästchenspalten .
Ich habe eine Seite erstellt, die 20.000 Tabellenzeilen mit zwei Kontrollkästchen-Spalten enthält. Ziel ist es, die zweite Spalte zu markieren und zu sehen, wie lange das gedauert hat, und dann die Markierung zu entfernen und zu sehen, wie lange das gedauert hat. Wir wollen natürlich die niedrigste Zeit. Ich verwende nur IE6 und 7, und in meinem Fall werden alle meine Benutzer dasselbe tun.
20.000 Zeilen, sagen Sie? Das habe ich auch gesagt, aber das geht in die Produktion (außerhalb meiner Hände) und es ist zu spät, das jetzt noch zu ändern. Ich versuche gerade, einen Hail Mary zu werfen, wenn noch 1 Sekunde auf der Uhr ist. Außerdem habe ich gelernt, dass input.chkbox nicht der schnellste Selektor (für IE7) ist! :)
Die Frage ist, gibt es einen besseren Weg, dies zu tun jQuery oder anders? Ich möchte, dass es in weniger als einer halben Sekunde auf meiner Maschine ausgeführt werden.
Damit ihr nicht den ganzen Mist, den ich schon gemacht habe, noch einmal abtippen müsst, hier ist das Testmaterial, das ich mir ausgedacht habe:
Aktualisiert am Morgen des 14.4. um weitere Zeitversuche aufzunehmen:
<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>
