चूंकि मैं एक jQuery परीक्षण का उपयोग कर jQuery 1.3+ का उपयोग करता हूं, इसका उपयोग कर रहा है। दूसरा सादा जावास्क्रिप्ट है जिसे मैंने 2000 में वापस पाया था। मैंने उस मार्ग पर जाना बंद कर दिया क्योंकि परीक्षण चलाने के लिए लगभग 150 सेकंड लग रहे थे। मैंने कुछ jQuery ऑप्टिमाइज़ेशन वेब पेज पढ़े हैं जो एक तत्व का चयन करने से संबंधित हैं। इसका उपयोग करने के लिए '#id' सबसे अच्छा मामला है, लेकिन अब मेरे पास का मुद्दा है जो एक चेक बॉक्स में सभी कॉलबॉक्स को एक बड़ी तालिका में चेक करता है जिसमें एकाधिक चेकबॉक्स कॉलम हैं।बड़ी संख्या में चेकबॉक्स का चयन करने और उन्हें चुनने का सबसे तेज़ तरीका क्या है?
मैंने जो किया है वह एक पृष्ठ सेटअप है जो दो चेक बॉक्स कॉलम के साथ 20,000 टेबल पंक्तियां बनाता है। लक्ष्य दूसरे कॉलम को जांचना है कि कितना समय लगा, और फिर उन्हें अनचेक करें और देखें कि कितना समय लगेगा। जाहिर है हम सबसे कम समय चाहते हैं। मैं केवल आईई 6 और 7 का उपयोग कर रहा हूं और मेरे मामले में मेरे सभी उपयोगकर्ता वही कर रहे होंगे।
20,000 पंक्तियां आप कहते हैं? मैंने यही भी कहा, लेकिन यह उत्पादन (मेरे हाथों से बाहर) जा रहा है और अब इसे बदलने में बहुत देर हो चुकी है। मैं बस घड़ी पर 1 सेकंड के साथ एक गेल मैरी फेंकने की कोशिश कर रहा हूँ। इसके अलावा, मैंने सीखा है कि input.chkbox सबसे तेज़ चयनकर्ता नहीं है (आईई 7 के लिए)! :)
सवाल यह है कि, क्या यह jQuery या अन्यथा करने का एक बेहतर तरीका है? मैं इसे अपनी मशीन पर आधे सेकेंड से भी कम समय में चलाने के लिए प्यार करता हूँ।
<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>
Updated सुबह 4/14 आगे समय परीक्षणों को शामिल करने के:
तो तुम सब बकवास मैं पहले से ही यहाँ किया है फिर से लिखें की जरूरत नहीं है परीक्षण सामान मैं के साथ आया है
मुझे असहनीय होने का मतलब नहीं है, लेकिन एक पृष्ठ में 20k पंक्तियां केवल खराब डिज़ाइन हैं। आपको इसे ठीक करना चाहिए। :) –
अच्छा ... कोई मजाक नहीं। :) मैंने यह नहीं किया! अभी इस रिलीज के लिए इसे ठीक करने के लिए पर्याप्त समय नहीं है। अगली रिलीज पर यह पहली बात होगी। इस परियोजना ने अभी तक कई "रोचक" चुनौतियों का सामना किया है। – rball