डोम हेरफेर देशी कार्यों का उपयोग करता सरल कार्रवाई करने। ब्राउज़र विक्रेता इन्हें अनुकूलित करते हैं। आप एचटीएमएल से पंक्ति बना रहे हैं। आंतरिक रूप से jQuery .innerHTML उपयोग कर रहा है संग्रह जो तब ब्राउज़र की मेगा तेजी पार्सर में पैच बनाने के लिए।
चयन तुलना में धीमा है क्योंकि जेएस कोड को बार-बार डोम के माध्यम से लूप की आवश्यकता होती है। नए ब्राउज़रों में देशी चयन हैंडलिंग है जो चयनकर्ता आधारित जेएस को नाटकीय गति प्रदान करता है। जैसे-जैसे इस समय चलता है, एक समस्या कम होगी।
यहाँ है कैसे क्वेरी सवाल, $(".checkbox input", row) में, टूट जाती है:
row.getElementsByTagName('*');- के लिए लूप हर तत्व के माध्यम से (पंक्ति के भीतर सभी तत्वों) और
/(\s|^)checkbox(\s|$)/ के साथ परीक्षण elements[i].className लौट आए।
- फॉर-लूप प्रत्येक तत्व अभी भी शेष है और
matched[i].getElementsByTagName('input');
- अंतिम संग्रह अद्वितीय है।
यह jQuery 1.3 के लिए अलग है क्योंकि यह इंजन सभी इनपुट तत्वों को प्राप्त करने और फिर मूल तत्वों का परीक्षण करने के साथ चयनकर्ता के माध्यम से दूसरी तरफ जाता है।
याद रखें कि जेएस चयनकर्ता इंजन सीएसएस चयनकर्ता spec के बहुत अधिक लागू करते हैं, वास्तव में सीएसएस (या वर्तमान ब्राउज़रों द्वारा कार्यान्वित) के साथ प्रयोग करने योग्य है। इस शोषण, और इंजन के ज्ञान, हम चयनकर्ता कुछ अलग अलग तरीकों से अनुकूलित किया जा सकता है अनुकूलन कर सकते हैं:
आप जानते हैं कि तत्व .checkbox टाइप है:
$("td.checkbox input", row);
यह फिल्टर के लिए तेजी से होता है पहले प्रकार के लिए और फिर केवल उन मैचों के लिए कक्षा के लिए। यह तत्वों के बहुत छोटे सबसेट के लिए लागू नहीं होता है, लेकिन यह लगभग कभी भी प्रैक्सिस में मामला नहीं है।
एकल कक्षा परीक्षण सामान्य selectors people actually use का सबसे धीमा है।
सरल चयन:
$("input[type=checkbox]", row);
एक पाश दो छोरों से तेज है। यह केवल इनपुट तत्व पाता है और फिर टाइप विशेषता के द्वारा उन्हें सीधे फ़िल्टर करता है। चूंकि उप-बाल-तत्वों का कभी भी उपयोग नहीं किया जाता है, इसलिए अद्वितीय भी छोड़ा जा सकता है (और स्मार्ट इंजन ऐसा करने का प्रयास करेंगे क्योंकि अद्वितीय धीमा है)।
एक और अधिक प्रत्यक्ष चयनकर्ता:
$("td:first.checkbox input", row);
एक अधिक जटिल चयनकर्ता वास्तव में तेजी से हो सकता है अगर यह और अधिक प्रत्यक्ष है (YMMV)। के बाद जब तक
इस करके अकेले मेरा मतलब है कि बजाय पंक्तियों के माध्यम से पाशन, और हर एक में चेकबॉक्स के लिए खोज की है, उन्हें छोड़:
यदि संभव हो, खोज संदर्भ तालिका स्तर तक ऊपर ले जाएँ पाश और फिर उन सभी को एक समय में का चयन करें:
$("tr td:first.checkbox input", table);
इस की बात बार-बार चयनकर्ता इंजन को फायरिंग की भूमि के ऊपर समाप्त करने के लिए है, लेकिन इसके बजाय एक दौड़ में सब कुछ करना। यह यहां कुछ ऐसा करने के बजाय पूर्णता के लिए प्रस्तुत किया गया है जो मुझे लगता है कि भारी गति से वापस आ जाएगा।
का चयन न करें:
बिट्स से पंक्ति का निर्माण, घटनाओं बताए के रूप में तुम जाओ।
var row = $('<tr></tr>');
var cell = $('<td class="checkbox"></td>').appendTo(row);
$('<input type="checkbox" name="..."/>').appendTo(cell).click(/* ... */);
यह आपके नियंत्रण से अजाक्स या अन्य टेम्पलेट्स के कारणों के लिए असंभव हो सकता है। इसके अतिरिक्त, गति आपके कोड को इस प्रकार की गड़बड़ी में बदलने के लायक नहीं हो सकती है, लेकिन कभी-कभी यह समझ में आ सकती है।
या, यदि इनमें से कोई भी काम आपके लिए काम नहीं करता है, या बहुत अधिक प्रदर्शन लाभ देता है, तो यह विधि पूरी तरह से पुनर्विचार करने का समय हो सकता है। आप पेड़ पर उच्च एक घटना श्रोता प्रदान कर सकते हैं और वहाँ की घटनाओं हड़पने, प्रति-तत्व उदाहरण के बजाय:
$('table').change(function(e){
// you may want a faster check...
if ($(e.target).is('input[type=checkbox]')) {
// do some stuff ...
}
});
इस तरह आप जब तक कुछ भी नहीं है, और जब तक, उपयोगकर्ता वास्तव में यह अनुरोध करता है। सबसे तेजी से। :-)
ummm। यह गलत है। दो लोगों ने मुझे एक कामकाजी समाधान दिया, लेकिन फिर उनकी पोस्टों का असर पड़ा। वैसे भी, ऐसा लगता है कि चयनकर्ताओं के वर्ग के नामों को हटाने से चीजों को बहुत तेजी से गति मिलती है। इवेंट प्रतिनिधिमंडल का उपयोग करने के लिए क्रिस्टोफ का जवाब वास्तव में मेरे लिए सबसे अच्छा लग रहा है, लेकिन यह एक बड़ा बदलाव है। – morgancodes