2013-01-21 16 views
10

मैंने देखा है कई उदाहरण (पसंदीदा ट्विटर की बूटस्ट्रैप सहित) जहां विभिन्न एपीआई बल्कि वर्ग $(".something")jQuery डेटा- * बनाम वर्ग चयनकर्ता - प्रदर्शन?

Nethertheless द्वारा चयन करने से $("[data-something]") का इस्तेमाल करते हैं मैं इन दो अलग अलग चयनकर्ताओं के बीच प्रदर्शन के बारे में जानकारी प्राप्त करने के की कोशिश की। मुझे आश्चर्य हुआ कि कई प्रदर्शन परीक्षणों से पता चला है कि उन चयनकर्ताओं ने अधिकांश आधुनिक ब्राउज़रों पर समान रूप से तेज़ किया है, इसलिए मैंने my own test

मैं वास्तव में अभी उलझन में हूं और मुझे नहीं पता कि यह मेरा परीक्षण है या नहीं गलत किया गया है (किसी भी तरह?) या यह अन्य परीक्षण है जिसे मैंने पहले देखा था?

किसी को भी और अधिक जानकारी प्रदान कर सके अगर मैं कुछ गलत कर रहा हूँ, जबकि परीक्षण या इन परीक्षण सही हैं और डेटा-विशेषता चयनकर्ता नियमित वर्ग चयनकर्ता से काफी धीमी वास्तव में है?

विशेषता चयनकर्ताओं का उपयोग करते समय आप

+1

मुझे लगता है क्योंकि 'डेटा-विशेषता' या तो 'querySelectorAll' या आवश्यकता होने पर चिल्लाती है, जबकि एक नियमित कक्षा तेजी से' getElementsByClassName' का उपयोग करती है। Http://jsperf.com/class-vs-data-1 – elclanrs

+0

अच्छी तरह से मैं इसे समझता हूं, लेकिन जैसा कि मैंने पहले पढ़ा था, मुझे आश्चर्य हुआ कि कुछ टेस्ट शो दोनों चयनकर्ताओं के लिए समान प्रदर्शन दिखाते हैं, इसलिए मैंने अपना स्वयं का परीक्षण किया और अब मुझे कुछ पुष्टि चाहिए कि वे परीक्षण सही हैं। या शायद कोई मुझे बता सकता है कि मैंने क्या किया है :) –

+0

मैं हाँ कहूंगा, ये परिणाम मेरे लिए सही लगते हैं। हालांकि, यह तब तक छोटा नहीं है जब तक आपको हजारों तत्वों की तरह न हो ... – elclanrs

उत्तर

4

धन्यवाद, प्रदर्शन आपके ब्राउज़र में querySelector समर्थन के आधार पर भिन्न हो सकती है। jQuery एक अंतर्निर्मित लाइब्रेरी (जिसे SizzleJS कहा जाता है) पर वापस आ जाएगा जो बहुत धीमी है।

कक्षा के नामों पर चयन तेजी से होगा क्योंकि यह हमेशा getElementsByClassName का उपयोग करेगा जो आमतौर पर सभी सामान्य ब्राउज़रों पर समर्थित होता है।

जिस तरह से मैं इसे देखता हूं, कक्षाएं डेटा उद्देश्यों के बाद एक अलग उद्देश्य प्रदान करती हैं। कक्षाएं तत्वों को "वर्गीकृत" करेंगी ताकि उन्हें सही ढंग से स्टाइल किया जा सके और संरचना बना सके।

डेटा विशेषताएँ बिल्कुल हैं: डेटा। कभी-कभी आपको अपने तत्वों में अतिरिक्त डेटा स्टोर करने की आवश्यकता होती है। उदाहरण के लिए:

<table> 
    <tr data-id="4" data-category="1"> 
     <td>Name</td> 
     <td>Email</td> 
    </tr> 
</table> 

ध्यान दें कि मैं उसी कारण से नियमित "आईडी" विशेषता का उपयोग नहीं कर रहा हूं।

संबंधित मुद्दे