कक्षा चयनकर्ताओं से डेटा विशेषता सीएसएस चयनकर्ता तेजी से हैं?

कुछ महीने पहले this article ने बताया कि कक्षाओं को वास्तव में वेबसाइट विकास से सभी से बचा जा सकता है।कक्षा चयनकर्ताओं से डेटा विशेषता सीएसएस चयनकर्ता तेजी से हैं?

मेरा सवाल है, कक्षा चयनकर्ताओं की तुलना में डेटा चयनकर्ता कितने कुशल हैं?

वाले तत्वों के लिए class='class1 class2 something anotherClass' वाले तत्वों के लिए पूछताछ की तुलना करना एक साधारण उदाहरण होगा।

[data-<attr>='<value>'] चयनकर्ता वर्ग स्ट्रिंग बनाम पूर्ण रूप से मूल्य की जांच करेगा जिसे विभाजित किया जाना चाहिए। इस बात को ध्यान में रखते हुए, डेटा एट्रिब्यूट तेजी से होना चाहिए।

तो, प्रश्न को परिष्कृत करने के लिए, सीएसएस के मामले में, क्या हम कक्षा चयनकर्ता या डेटा चयनकर्ता के साथ बेहतर हैं? और जावास्क्रिप्ट बिंदु से, jQuery("[data-component='something']")jQuery(".something") से अधिक कुशल होगा?

स्रोत

2012-09-19 Vlad Nicula

मैं किस तरह पता नहीं है की कोशिश कर सकते वेब प्रोग्रामिंग उस लेख की सोफस्ट्री के लिए प्रासंगिक है, लेकिन मुझे पूरा यकीन है कि मेरे पास जो कुछ भी है उसके साथ कुछ भी नहीं है। साथ ही, यदि आप उस आलेख को बारीकी से पढ़ते हैं, तो मुझे संदेह है कि इसके लेखक को कक्षाओं के साथ 'डेटा-' विशेषताओं के साथ उतना ही चिंता होगी; वे दोनों एक ही "अपराध" का प्रतिनिधित्व करते हैं। – Pointy

आपके प्रश्न के अनुसार, कुछ [jsperf] (http://jsperf.com) परीक्षण प्रश्न का उत्तर देने में मदद कर सकते हैं। मुझे संदेह है कि 'querySelectorAll()' आदि वाले किसी भी आधुनिक ब्राउज़र को या तो दृष्टिकोण के साथ कोई कठिनाई नहीं होगी। – Pointy

जितना अधिक मैं डेटा एट्रिब्यूट्स के बारे में सोचता हूं और कक्षाओं को जोड़ने के बजाए उन्हें स्टाइल करता हूं जितना मैं उन्हें पसंद करता हूं। उदाहरण के लिए, तथ्य यह है कि एक ब्लॉक तत्व (एक खोज बॉक्स की तरह) छुपाया जा सकता है डेटा-राज्य = 'छुपा' द्वारा संकेत किया जा सकता है। यह मेरे लिए आसान लगता है, एक डेवलपर पढ़ने के लिए, 'घटक विजेट-हेडर टच करने योग्य छुपे हुए गोलाकार शीर्ष' से। –

~~मैं इसे निर्णायक~~ नहीं कहूंगा, लेकिन ऐसा लगता है कि कक्षा चयनकर्ता तेज़ी से हैं ... मैंने इसे एक त्वरित परीक्षण के लिए एक साथ रखा है।

http://jsperf.com/data-selector-performance

संपादित:

Vlad के और मेरे jsperf परीक्षण ... के आधार पर करता है, तो प्रदर्शन चिंता का विषय (विशेष रूप से आईई) ... कक्षाएं अभी भी जाने के लिए

स्रोत

2012-09-19 14:52:01 BLSully

मैं भी कक्षाओं का परीक्षण कर रहा हूं, कुछ प्रश्न जोड़ रहा हूं चयनकर्ता मेरे परीक्षण मामले में। –

http://jsperf.com/testing-data-atribute- चयनकर्ता हाँ, ऐसा लगता है कि क्वेरी भी चयनकर्ता डेटा एट्रिब्यूट्स पर धीमा है। यह चौंकाने वाला है! मैं उन्हें तेजी से होने की उम्मीद कर रहा था क्योंकि \ "\" के भीतर वास्तविक मान प्राप्त करने के लिए कोई स्ट्रिंग विभाजन नहीं है। –

वाह .... आईई 9 में परीक्षण ... एकल वर्ग चयनकर्ता डेटा चयनकर्ता को दूर करता है ... और यह एक परीक्षण के लिए क्रोम से भी तेज है .. आईई 6300 ओप/सेकंड बनाम क्रोम के 4800 ... – BLSully

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

मुझे लगता है कि ब्राउज़र विक्रेताओं ने चयनकर्ताओं के खिलाफ पूछताछ के मुकाबले सबसे अधिक इस्तेमाल किए गए परिदृश्य (कक्षाओं के खिलाफ क्वेरी) में सुधार करने में अधिक समय व्यतीत किया है। यह बदल रहा है और अगर वे अन्य मामलों को अनुकूलित करना शुरू करते हैं तो मुझे आश्चर्य नहीं होगा।

स्रोत

2012-09-20 08:22:00

BLSully के उत्तर की जांच करने के बाद और test page उन्होंने प्रदान किया, तुलना के लिए वास्तविक आंकड़े यहां दिए गए हैं।

jQuery वर्ग चयनकर्ता प्रदर्शन बनाम दूसरी प्रति jQuery डेटा विशेषता चयनकर्ता प्रदर्शन संचालन: तेजी से क्रोम में 27.0.1453

140% फ़ायरफ़ॉक्स में तेजी से 15.0.1

131% तेजी में

31% फ़ायरफ़ॉक्स 21,0
1.267% IE में तेजी से 9,0
1.356% IE में 10,0

तेजी 0

स्रोत

2013-05-31 09:38:53 Zac

मुझे इन सभी उत्तरों के बारे में पता नहीं है, लेकिन मैंने अपना खुद का परीक्षण चलाया और विशेषता तेज है।

आप इसे अपने आप सिर्फ शुरुआत में समय की बचत, काम करते हैं और अंतिम समय मिलता तो गणित कर

\t \t var newDate = new Date().getTime(); 
 
\t \t $('.test-t').removeClass('act'); 
 
\t \t $('.t1r').addClass('act'); 
 
\t \t var currentDate = new Date().getTime(); 
 
\t \t var diff = currentDate-newDate; 
 
\t \t console.log(diff); 
 

 
\t \t var newDate = new Date().getTime(); 
 
\t \t $('.test-t2').attr('this-act',''); 
 
\t \t $('.t2r').attr('this-act','1'); 
 
\t \t var currentDate = new Date().getTime(); 
 
\t \t var diff = currentDate-newDate; 
 
\t \t console.log(diff);

स्रोत

2016-05-27 00:59:31

मुझे यकीन नहीं है कि मामले का सबूत देने के लिए प्रत्येक का एक उदाहरण पर्याप्त है या नहीं। प्रत्येक दृष्टिकोण के लिए कितने अलग समय हैं क्योंकि मैं आपके स्निपेट को नहीं चला सका? – miltonb

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

कक्षा चयनकर्ताओं से डेटा विशेषता सीएसएस चयनकर्ता तेजी से हैं?

उत्तर

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