Vì tôi sử dụng jQuery 1.3+ tất cả ngoại trừ một kiểm tra theo thời gian đang sử dụng điều đó. Khác là javascript đơn giản tôi tìm thấy từ trở lại vào năm 2000. Tôi ngừng đi tuyến đường đó như nó đã được khoảng 150 giây để chạy thử nghiệm. Tôi đã đọc khá nhiều trang web tối ưu hóa jQuery có liên quan đến việc chọn một phần tử đơn lẻ. '#id' là trường hợp tốt nhất để sử dụng, nhưng bây giờ tôi có vấn đề về số kiểm tra tất cả các hộp kiểm trong một cột trong một bảng khá lớn có nhiều cột hộp kiểm.Cách nhanh nhất để chọn một số lượng lớn hộp kiểm và chọn/chọn chúng là gì?
Điều tôi đã làm là thiết lập trang tạo 20.000 hàng bảng với hai cột hộp kiểm. Mục tiêu là để kiểm tra cột thứ hai xem mất bao lâu rồi bỏ chọn chúng và xem mất bao lâu. Rõ ràng chúng tôi muốn thời gian thấp nhất. Tôi chỉ sử dụng IE6 và 7 và trong trường hợp của tôi tất cả người dùng của tôi sẽ làm như vậy.
20.000 hàng bạn nói? Đó là những gì tôi đã nói, nhưng điều này sẽ được sản xuất (ngoài tầm tay của tôi) và đã quá muộn để thay đổi. Tôi chỉ cố gắng ném một cơn mưa đá với một giây còn lại trên đồng hồ. Bên cạnh đó, tôi đã học được rằng input.chkbox không phải là bộ chọn nhanh nhất (cho IE7)! :)
Câu hỏi đặt ra là, có cách nào tốt hơn để làm jQuery này hay không? Tôi muốn nó được chạy trong vòng chưa đầy nửa giây trên máy của tôi.
Vì vậy, bạn không cần phải nhập lại tất cả các crap tôi đã thực hiện ở đây là các công cụ kiểm tra tôi đã đưa ra:
Cập nhật Morning 4/14 để bao gồm thêm các thử nghiệm thời gian:
<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>
Tôi không có ý là vô ích, nhưng 20 nghìn hàng trong một trang chỉ là thiết kế tồi. Bạn nên khắc phục điều đó. :) –
Chà ... không đùa đâu. :) Tôi đã không làm điều đó! Ngay bây giờ không có đủ thời gian để sửa nó cho bản phát hành này. Đây sẽ là điều đầu tiên cần làm trong lần phát hành tiếp theo. Dự án này đã mang lại nhiều thách thức "thú vị" cho đến nay. – rball