पूरी तरह से योग्य सीएसएस शैलियों कुशल हैं?

Question

सीएसएस शैलियों एक दृष्टिकोण बनाने में पूरी तरह से योग्य शैली होने के लिए इस तरह के रूप

#pnlImage div.ipd-imageInfo div.ipd-tags span.ipd-tag 

जैसे

div.ipd-tags span.ipd-tag 

एक छोटी परिभाषा जो विशिष्ट रूप में अच्छी तरह शैली की पहचान हैं की तुलना में लगता है। हालांकि, यदि साइट का विस्तार किया गया है या दूसरी शैली बदल दी गई है तो तत्व को विशिष्ट रूप से पहचानने का जोखिम नहीं चलता है।

क्या कोई शैली पूरी तरह क्वालिफाइंग से एक प्रदर्शन हिट है, यानी, यह लंबा है? शैली नामकरण के लिए कुछ दिशानिर्देश/सर्वोत्तम अभ्यास संदर्भ हैं?

धन्यवाद

Answer 1

1. एक #id अवलोकन किया जा रहा तेज है।
2. tag देखकर थोड़ा धीमा है।
3. .class देखकर सबसे धीमा है।

एक तेज लुकअप के साथ अपने चयनकर्ताओं को शुरू करने से अगले भाग के लिए आवश्यक लुकअप की संख्या कम हो जाएगी। यही है, अगर मैंने p.myClass लिखा है, तो ब्राउजर बहुत जल्दी p टैग ढूंढ सकता है और फिर इसे कक्षा के नाम की जांच करने के लिए केवल उन लोगों के माध्यम से लूप करना होगा।

यह कहा गया है कि यह आपकी सीएसएस फ़ाइल की प्रतिपादन गति से अधिक की रखरखाव को रेट करेगा। ब्ला ब्ला ब्लाह समयपूर्व अनुकूलन ब्ला ब्लाह।

Answer 2

मुझे नहीं लगता कि सैद्धांतिक उत्तर कैसे संभव है: उत्तर कार्यान्वयन-निर्भर है; इसलिए मेरा सुझाव है कि आप इसे सुनिश्चित करने के लिए प्रोफाइल करें।

Answer 3

क्या कोई शैली पूरी तरह क्वालिफाइंग से एक प्रदर्शन हिट है, यानी, यह लंबा है?

हां, डोम-पेड़ के हर गतिशील परिवर्तन पर, सीएसएस-अभिव्यक्ति को कम से कम कुछ नोड्स के विरुद्ध प्रेषित किया जाना है। मुझे संदेह है कि इससे किसी भी ध्यान देने योग्य देरी होगी, हालांकि।

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

यदि यह आपके नियंत्रण में है, तो सरल वर्गों के साथ रहें (भले ही उनमें से अधिक हो) और जितना संभव हो उतना स्तर (फोंट के कुछ रिश्तेदार आकार का एकमात्र उपयोग मामला है जहां मैंने कई स्तरों का उपयोग किया है, और यहां तक ​​कि यह कुछ हद तक अनिवार्य था)। यह आपके सिर में पृष्ठ संरचना का ट्रैक रखने के लिए बहुत संज्ञानात्मक क्षमता को बर्बाद कर देता है।

Answer 4

Google (not a search, actually them) seems to think that it does cause a performance hit.

इसके अलावा, मोज़िला फाउंडेशन एक लेख "Writing Efficient CSS for use in the Mozilla UI" है कि अपने ब्राउज़र (रों), और कैसे उनके प्रतिपादन इंजन के लिए अपनी शैली नियमों का अनुकूलन करने में CSS चयनकर्ताओं के संभावित प्रदर्शन नुकसान की रूपरेखा है। उनके लेख में बहुत अच्छे उदाहरण हैं और क्या बुरा है। कृपया ध्यान रखें कि यह केवल उनके ब्राउज़र के लिए प्रासंगिक है, हालांकि।

वहाँ CSS चयनकर्ताओं के बारे में प्रतिपादन गति पर प्रभावित करते हैं, सार्वजनिक रूप से उपलब्ध भी कुछ मानक हैं:

• http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
• http://blog.archive.jpsykes.com/153/more-css-performance-testing-pt-3/

मैं, फिर भी, लगता है कि यह, है अधिकांश भाग के लिए, घोड़े की खाद। आप कुछ अन्य सरल अनुकूलन का उपयोग कर अपने पृष्ठ की लोडिंग/प्रतिपादन गति पर एफएआर अधिक परिवर्तन को प्रभावित कर सकते हैं। मेरा मानना ​​है कि आपकी सैनिटी, और एक सुव्यवस्थित कोड बेस पहले आना चाहिए। यदि यह कुछ सौदे के रूप में बड़ा था, तो हम सभी हमारे वेब पेजों को स्टाइल करने के लिए HTML < 4 विशेषताओं (bgcolor =, border =, आदि) का उपयोग करके वापस आ जाएंगे।

Answer 5

आपको डेविड बैरन (मोज़िला) के Google Tech talk में रुचि हो सकती है।

Answer 6

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

कारण फ़ाइल का आकार नहीं है, लेकिन मुख्य सीएसएस को बदलने के बिना आपकी साइट का विस्तार करने की क्षमता है।

उदाहरण के लिए यदि आप अपने एचटीएमएल साइट में इस भाग मिल गया है:

<div id="Header"> 
    <h1>Css example</h1> 
    <h2>Welcome to the css example site</h2> 
    <p>An example page by davy</p> 
</div> 

और इस सीएसएस है:

#Header 
{ 
    background-color: #ffeedd; 
    padding: 1em; 
} 
#Heading h1 
{ 
    font-size: 3em; 
    color: #333; 
} 
#Heading h2 
{ 
    font-size: 1.5em; 
    color: #666; 
} 
#Heading p 
{ 
    margin: 0 0.5em 1.5em 1em; 
    font-size: 1.1em; 
    color: #999; 
} 

और बाद में आप एक पृष्ठ पर आते हैं, उस पर जहां ' एक अलग पृष्ठभूमि के लिए अपने शीर्षलेख की तरह डी।

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

सबसे छोटा चयनकर्ता का उपयोग करके आप अभी भी अपने शीर्षलेख को बदलने के लिए div#Header { background : ... } का उपयोग कर सकते हैं। आप या तो एक अतिरिक्त सीएसएस फ़ाइल बना सकते हैं और उस पृष्ठ पर अपने हेडर में लोड कर सकते हैं (यदि अनुमति है) या सीधे अपने <head> अनुभाग में स्टाइल परिभाषा जोड़ें। इसके बारे में अच्छी बात यह है कि आपकी सीएसएस फ़ाइल प्रत्येक अलग-अलग पेज के लिए चयनकर्ताओं के साथ नहीं बढ़ती है, और आप classitis से साफ़ रह सकते हैं।

आप इसका उपयोग अपने पृष्ठ (स्थिर/तरल पदार्थ) के आकार बदलने की विधि को स्विच करने के लिए भी कर सकते हैं ताकि एक टेम्पलेट/मास्टरपेज डिफ़ॉल्ट सीएसएस का उपयोग कर सके, और दूसरा उस टेम्पलेट/मास्टर पेज से निकलता है और केवल FluidWitdth90 नामक एक सीएसएस को लिंक करता है। टेम्पलेट को टेम्पलेट को 90% चौड़ाई तरल लेआउट में बदलने के लिए।

Answer 7

मेरे पास एक ऐसी साइट है जहां एक और डिजाइनर भारी योग्य शैलियों और रखरखाव का उपयोग करता है, यह एक दुःस्वप्न है। (योग्य शैलियों का केवल एक हिस्सा है)

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

तो रखरखाव दृष्टिकोण से यह कुशल नहीं है। एक टाइपिंग दृष्टिकोण से भी कुशल नहीं है।