एचटीएमएल डोम्स, आईडी बनाम कोई आईडी नहीं?

Question

बशर्ते आप इस तरह के रूप में बहुत ही सरल बच्चों तत्वों के सैकड़ों के साथ एक कंटेनर div है निम्नलिखित:

<div id="stuffContainer" class="item-container"> 
    <div class="single-item"></div> 
    <div class="single-item"></div> 
    <div class="single-item"></div> 
    <div class="single-item"></div> 
    <div class="single-item"></div> 
    <div class="single-item"></div> 
    [...] 
</div> 

किसी भी (सार्थक) रास्ते में प्रत्येक एक तत्व नुकसान (ग्राहक) प्रदर्शन के लिए एक विशिष्ट आईडी सहित चाहेंगे, यह हो प्रतिपादन, जावास्क्रिप्ट या स्मृति के अनुसार?

मैं क्यों पूछ रहा हूं: मुझे विशिष्ट वस्तुओं को संदर्भित करने के लिए समय-समय पर आवश्यकता हो सकती है, और मैं यह पता लगाने की कोशिश कर रहा हूं कि मुझे पहले से तय करना चाहिए कि मुझे कौन से आइटम चुनने की आवश्यकता होगी, उन्हें आईडी दें और छोड़ दें शेष, या बस उन सभी को आईडी निर्दिष्ट करते हैं, जो प्रक्रिया को और अधिक सीधे आगे बढ़ाएंगे, लेकिन मुझे आश्चर्य है कि यह किसी भी तरह से अधिक हो सकता है।

बोनस पॉइंट (यदि मैं वास्तव में उन्हें दे सकता हूं) यदि कोई इस बारे में बात कर सकता है कि यह आधुनिक ब्राउज़र द्वारा कैसे प्रबंधित किया जाता है और यह ब्राउज़र के प्रदर्शन और प्रबंधन के तरीके में अंतर क्यों नहीं करेगा।

Answer 1

सबसे अधिक, मैं अनुमान लगा रहा हूं कि ब्राउज़र की मूलभूत चीजें डीओएम संरचना के निर्माण के दौरान प्रत्येक तत्व को संपत्ति के रूप में निर्दिष्ट करती हैं, साथ ही साथ हैश टेबल में आईडी को स्टोर करने के लिए #id चयनकर्ताओं, document.getElementById() और बाद में idref लुकअप जैसी चीजें। मुझे नहीं लगता कि यह देखा गया प्रदर्शन या मेमोरी उपयोग में थोड़ी सी भी कमी का कारण बन जाएगा, क्योंकि हैश टेबल और डीओएम को बहुत अच्छी तरह अनुकूलित किया गया है।

यह कहा गया है कि, यदि आपके तत्व पर सभी पर आईडी की आवश्यकता नहीं है, तो उन्हें आईडी निर्दिष्ट करने में कोई बात नहीं है; आप इसके बदले मार्कअप ब्लोट के साथ खत्म होने जा रहे हैं। डेन डेविस ब्रैकेट का उल्लेख है कि स्पष्ट रूप से मंदी का कारण बनता है क्योंकि यह ग्राहक कनेक्शन पर निर्भर करता है।

यदि आप सीएसएस चयनकर्ताओं का उपयोग करके इन तत्वों का संदर्भ ले सकते हैं, तो आप हमेशा विशिष्ट बच्चों को देखने के लिए :nth-child() का उपयोग कर सकते हैं। यदि आपको पुराने ब्राउज़र का समर्थन करने की आवश्यकता है, तो हमेशा एक सीएसएस 2 समाधान होता है। इन सवालों देखें:

• How can I get the second child using CSS?
• How do I get the nth child of an element using CSS2 selectors?

Answer 2

id विशेषताओं का उपयोग करने से कोई महत्वपूर्ण प्रदर्शन degradations जब सैकड़ों बार इस्तेमाल किया जाता है, यहां तक ​​कि। यद्यपि यह उन तत्वों को हाथ से लेने के लिए थोड़ा तेज होगा, जिन्हें आपको विशिष्ट रूप से पहचानने की आवश्यकता है, मेरी राय में प्रदर्शन सुधार ऐसा करने के लिए आवश्यक अतिरिक्त समय को उचित नहीं ठहराएगा।

कहा जा रहा है, मुझे यकीन नहीं है कि इस मामले में id विशेषताएँ भी आवश्यक हैं। आप jQuery का उपयोग करने के लिए गए थे, तो आप उदाहरण के लिए चौथे तत्व का चयन कर सकता है,, निम्नलिखित कोड का उपयोग कर:

$('.single-item').eq(3); 

Answer 3

BoltClock से स्पष्ट है, सबसे प्रदर्शन संबंधी प्रश्नों के जवाब है 'यह उपाय!'। उस ने कहा, आप माप के लिए एक संभावित धुरी चूक गए: डाउनलोड आकार। आवश्यकतानुसार अधिक तत्वों में आईडी विशेषताओं को जोड़ना आपके बाइट वजन में जोड़ देगा, कम से कम नहीं क्योंकि तत्वों को अद्वितीय होना आवश्यक है (जिसका अर्थ है कि वे ज़िप के साथ-साथ गैर-अद्वितीय विशेषताओं को भी नहीं करेंगे)।

Answer 4

इस मामले में आईडी के सब कुछ का उपयोग करना थोड़ा अधिक होगा। मैं समझता हूं कि आप कहां से आ रहे हैं, लेकिन यदि आप jQuery जैसी भाषा का उपयोग करते हैं, तो बच्चों को चुनने से संरचना पर विचार करना आसान होगा।

$('.single-item').click(function() 
{ 
    var yourClickedDiv = $(this); 
    // execute the rest of your code here 
}); 

यह सिर्फ एक छोटा सा उदाहरण है, लेकिन जैसा कि आप देख सकते हैं, तो आप प्रत्येक div जो कुछ के लिए आपको बस इतना करना उपयोग करने में सक्षम हैं: यहाँ आप कैसे जानते हैं इसका एक उदाहरण है जो div के क्लिक किया गया है । यह एचटीएमएल फ़ाइल को अत्यधिक आईडी टैग से कम अव्यवस्थित रखेगा, साथ ही साथ आपकी फ़ाइल का आकार थोड़ा छोटा रखेगा (उल्लेख न करें कि आपको प्रत्येक अद्वितीय आईडी उत्पन्न करने से सिरदर्द बचाया जाए)।

Answer 5

मूल प्रश्न सामग्री/उद्देश्य के बारे में बहुत विशिष्ट नहीं है और आईएमओ के आधार पर भिन्नता होनी चाहिए। मैं निश्चित रूप से एक बिंदु पर वर्तमान स्वीकृत उत्तर से असहमत हूं। एचटीएमएल के एक टन में नई आईडी को लूप करना और संलग्न करना जो पहले से ही प्रस्तुत किया गया है, बड़ी मात्रा में रिफ्लो गणना का कारण बन सकता है जो कि 'सामग्री कंटेनर' का प्रतिनिधित्व करता है, इसके आधार पर बदसूरत हो सकता है। सर्वर से आईडी के साथ

बिल्ड पहले या क्लाइंट-साइड पर एकल ब्लॉक के रूप में सम्मिलित करें, तो आपको अवश्य

एक सामान्य नियम के रूप में, बार-बार परिवर्तन के साथ डोम मार अगर आप इसे से बचने कर सकते से बचें। सर्वर पर पहले से बनाए गए आईडी बहुत नगण्य हैं जहां तक ​​ब्राउज़र पृष्ठ को लोड करता है, आईएमओ। निश्चित रूप से, यह एक बड़ा, और इसके परिणामस्वरूप धीमी हैश-टेबल है, लेकिन अगर हम सैकड़ों बात कर रहे हैं और हजारों नहीं हैं तो मुझे गंभीरता से संदेह है कि आप नोटिस करने जा रहे हैं।

डेटा से निर्मित एक चयन सूची जैसे कुछ के मामले में एक अधिक कुशल क्लाइंट-साइड दृष्टिकोण आईडी और सभी के साथ पहले स्ट्रिंग के रूप में बनाना होगा, और उसके बाद किसी कंटेनर के आंतरिक HTML को असाइन करना होगा या अगर कुछ मेरे जेएस चैट सहकर्मियों, आपके पास हर संभव उपयोग-मामले में आंतरिक HTML के बारे में एक विचित्र हैग-अप है, भले ही यह अब spec में है, कम से कम एक दस्तावेज़ खंड में निर्माण और संलग्न करें। और उसके बाद अपने कंटेनर में संलग्न करें।

डेटा-गुण या वर्ग आईडी

IMO में, गंध-कारक नहीं प्रदर्शन बल्कि एचटीएमएल ब्लोट और एक आईडी निर्भरता जहां कोई भी जरूरत है बनाने, जिससे कुछ और है कि हो सकता है अवरुद्ध करने के बारे इतना है अपने एकल-आइटम divs में से एक पर एक कस्टम आईडी उपयोगी पाएं। आईडी निश्चित रूप से जावास्क्रिप्ट में एक तत्व लुक-अप को कम करने का आदर्श तरीका है, लेकिन सामग्री वाले कंटेनरों के मामलों में आपको प्रत्येक बच्चे की वस्तु को पहचानने से आईडीड कंटेनरों से अधिक लचीलापन मिल जाएगा। वन-स्टेपिंग बनाम दो-स्टेपिंग का प्रदर्शन लाभ तत्वों को जेनेरिक आईडी लागू करने की लचीलापन लागत के लायक नहीं है।

एक विकल्प के रूप में आप अद्वितीय मूल्यों या डेटा विशेषता वाले वर्गों का उपयोग कर सकते हैं, उदा। 'डेटा-Itemid = "0"'। एचटीएमएल के छोटे सेटों के लिए एक कस्टम चयन सूची की तरह जहां आईडी को डेटा अपडेट करने में आसानी के लिए कुछ सर्वर-साइड इंडेक्सिंग सिस्टम से कनेक्ट किया जाता है, मैं इस अत्यधिक दृश्यमान दृष्टिकोण का पक्ष लेता हूं क्योंकि यह आर्किटेक्चर को समझना आसान बनाता है, लेकिन यह बहुत कुछ जोड़ता है परिदृश्यों में ट्रैक करने के लिए अनावश्यक विशेषताओं की जहां सैकड़ों से हजारों आइटम शामिल हो सकते हैं।

या आदर्श रूप में (अधिकांश मामलों में), घटना प्रतिनिधिमंडल

सबसे आदर्श, IMO, आप अतिरिक्त विशेषताओं को पूरी तरह से ऐसे मामलों में जहां आप केवल बच्चे एकल आइटम तत्व आप क्लिक कर रहे हैं और क्या नहीं के बारे में परवाह बचने यह 'आईडी' या ऑर्डर है कि उन सिंगल-आइटम कंटेनर स्थिर रहेंगे और आप सुरक्षित रूप से मान सकते हैं कि पद प्रभावी आईडी हैं। या एक और परिदृश्य जहां यह एक गैर स्थैतिक सिंगल-आइटम सेट के साथ काम कर सकता है, यदि आपके पास ऑब्जेक्ट्स की एक सरणी में सिंगल-आइटम डेटा है जो शफल हो जाता है और फिर उपयोगकर्ता द्वारा शुरू किए गए प्रकारों पर HTML बनाने और बदलने के लिए उपयोग किया जाता है अन्य डेटा-ट्रैकिंग निर्भरताओं के लिए HTML का टाई ऑर्डर करें।

गैर Jquery दृष्टिकोण (untested):

var myContainer = document.getElementById('stuffContainer'); 
//ignore following indent goof 

    myContainer.addEventListener('click', function(e){ 
     var 
      singleItem, 
      elementOriginallyClicked = singleItem = e.target, 
      stuffContainer = this; 

     //anything clicked inside myContainer will trigger a click event on myContainer 
     //the original element clicked is e.target 
     //google 'event bubbling javascript' or 'event delegation javascript' for more info 

     //climb parentNodes until we get to a single-item node 
     //unless it's already single-item that was originally clicked 
     while(!singleItem.className.match(/[=\s'"]single-item[\s'"]/g)){ 
      singleItem = singleItem.parentNode; 
     } 

     //You now have a reference to the element you care about 

     //If you want the index: 

     //Get the singleItem's parent's childNodes collection and convert to array 
     //then use indexOf (MDN has normalizer for IE<=8) to get the index of the single-item 

     var childArray = Array.prototype.slice.apply(stuffContainer.childNodes,[0]), 
     thisIndex = childArray.indexOf(singleItem); 

     doSomethingWithIndex(thisIndex); 
     //or 
     //doSomethingWithDOMObject(singleItem); 

    }); 

या सरल JQuery प्रतिनिधिमंडल शैली (भी, untested):

$('#someContainer').on('click','.single-item', function(){ 
    var $_singleItem = $(this), //jq handles the bubble to the interesting node for you 
    thisIndex = $_singleItem.index(); //also getting index relative to parent 

    doSomethingWithIndex(thisIndex); 
    //or 
    //doSomethingWithJQObject($_thisItem); 
});