नेस्टेड चयनकर्ता प्रदर्शन प्रभाव और कम

Question

मैं इस बारे में पिछले 1.5 घंटों के लिए पढ़ रहा हूं और अभी भी संक्षिप्त और निर्णायक उत्तर नहीं मिला।

जहां तक ​​मैं ब्राउजर पार्स सीएसएस चयनकर्ताओं को दाएं से बाएं समझता हूं।

एक लंबे CSS चयनकर्ता इसका मतलब है कि इस जैसे:

.card .container .businesscard .pinfo li.pinfo-box span:first-child 

कोड के कम से कम कुशल लाइनों में से एक है करने के लिए कभी तो में यहाँ दिखाई।

सबसे पहले, क्या मैं इस पर सही हूं?

दूसरा, मैं कम से कम एक समृद्ध यूआई डिजाइन कर रहा हूं, जो आखिरकार इस तरह के विशाल चयनकर्ताओं को नेस्टेड डिज़ाइनों से बाहर निकालता है जो मैं कोडिंग कर रहा हूं।

इस तरह के चयनकर्ताओं से बचने के लिए क्या किया जा सकता है? अकेले कक्षाओं और आईडी पर भरोसा करते हैं? लेकिन फिर यदि आप नेस्टेड सीएसएस नहीं लिख सकते हैं तो कम से कम उपयोग करने का उद्देश्य क्या है?

आपके इनपुट की सराहना की जाती है।

Answer 1

यह सही है। ब्राउज़र चयनकर्ताओं को दाएं से बाएं से मूल्यांकन करते हैं। यह li.pinfo-box के अंदर span और अन्य खोजने के लिए प्रयास करेगा।

कम लिखते समय अनुयायी के अंगूठे का एक नियम है: 3-4 से अधिक स्तरों पर घोंसला नहीं है।

यह आपके चयनकर्ताओं को बड़े से बढ़ने से रोक देगा, जबकि आप अभी भी कम से कम घोंसले की सुविधा से लाभ प्राप्त कर पाएंगे।

स्टाइल सूचियों के दौरान "बेकार" घोंसला का एक अच्छा उदाहरण है।

#wrapper .blog-post ul, #wrapper .blog-post ul li

यह वास्तव में निर्दिष्ट करने के लिए कि li एक ul अंदर होना चाहिए आवश्यक है: कभी कभी मैं इस तरह चयनकर्ताओं बारे में?

#wrapper .blog-post li

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

Answer 2

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