Unsplash में Jantine Durnbos द्वारा फोटो

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

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

इसे ठीक करने के लिए, मैंने कुछ शोध किए और अवधारणाओं की एक छोटी सूची को एक साथ रखा, जो कि सीएसएस को बेहतर ढंग से समझने और लिखने के लिए दिलचस्प और उपयोगी लगती हैं।

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

शब्दावली

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

वंशज संयोजक

क्या आपने अपनी शैली में चयनकर्ताओं के बीच की खाई देखी है? वास्तव में, इसका एक नाम है, यह एक वंशज कॉम्बिनेटर है।


वंशज संयोजक

लेआउट, प्रतिपादन और रचना

ये शर्तें ब्राउज़र में रेंडरिंग से संबंधित हैं, लेकिन वे महत्वपूर्ण हैं क्योंकि कुछ CSS गुण रेंडरिंग पाइपलाइन के विभिन्न चरणों को प्रभावित करते हैं।

1. लेआउट

लेआउट कदम इस बात की गणना है कि स्क्रीन पर कोई तत्व कितना स्थान रखता है। CSS (उदाहरण के लिए, चौड़ाई, ऊंचाई) में 'लेआउट' संपत्ति को बदलने का मतलब है कि ब्राउज़र को अन्य सभी तत्वों की जांच करनी होगी और पृष्ठ को फिर से बनाना होगा, अर्थात, प्रभावित क्षेत्रों को फिर से लिखना और उन्हें ओवरलैप करना होगा।

2. ड्राइंग (पेंट)

यह प्रक्रिया तत्वों के सभी दृश्य भागों (रंगों, सीमाओं, आदि) से भरती है। तत्व आमतौर पर कई परतों पर खींचे जाते हैं।

'पेंट' संपत्ति को बदलने से लेआउट प्रभावित नहीं होता है, इसलिए ब्राउज़र लेआउट कदम को छोड़ देता है, लेकिन वैसे भी रेंडर करता है।

प्रतिपादन करते समय अक्सर प्रतिपादन में सबसे अधिक समय लगता है।

3. संरचना (समग्र)

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

यदि आप CSS संपत्ति को बदलते हैं, जो लेआउट या रेंडरिंग को प्रभावित नहीं करता है, तो ब्राउज़र को केवल रचना करना होगा।

विभिन्न CSS गुणों को ट्रिगर करने वाली प्रक्रियाओं के बारे में अधिक जानकारी के लिए, CSS ट्रिगर देखें।

सीएसएस प्रदर्शन

संतान चयनकर्ता महंगा हो सकता है

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

उदाहरण के लिए:


वंशज चयनकर्ता उदाहरण

ब्राउजर को हमारे #nav सेक्शन के अंदर जाने से पहले पेज के सभी लिंक का मूल्यांकन करना होगा।

एक अधिक कुशल तरीका यह है कि #nav सेक्शन के अंदर प्रत्येक <a> लिंक के लिए एक विशिष्ट .navigation-link चयनकर्ता #nav ।

ब्राउज़र चयनकर्ताओं को दाएँ से बाएँ पढ़ता है

ऐसा लगता है कि मुझे इस महत्वपूर्ण बात को पहले ही पता होना चाहिए था, लेकिन मुझे नहीं पता था ... सीएसएस को पार्स करते समय, ब्राउज़र चयनकर्ताओं को दाएं से बाएं ओर पार्स करता है।

निम्नलिखित उदाहरण पर विचार करें:


ब्राउज़र दाईं से बाईं ओर पढ़ता है

कदम:

• पृष्ठ पर सभी <a> मेल खाते हैं;
  
• <li> में निहित सभी <a> खोजें;
  
• माचिस लें और उन्हें <ul> में उन तक सीमित करें;
  
• अंत में, उपरोक्त चयन को वर्ग के साथ तत्व में निहित फ़िल्टर करें।

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

उपरोक्त उदाहरण के प्रदर्शन को बेहतर बनाने के लिए, हम <a> टैग पर ही .container-link-style तरह कुछ जोड़कर .container ul li a को बदल सकते हैं।

यदि संभव हो, तो लेआउट को न बदलें।

कुछ CSS संपत्तियों में बदलाव के लिए पूरे लेआउट को अपडेट करने की आवश्यकता होती है।

उदाहरण के लिए, width , height , top , left के ज्यामितीय गुणों को लेआउट को पुनर्गणना करने और प्रतिपादन पेड़ को अपडेट करने की आवश्यकता होती है।

यदि आप इन गुणों को कई तत्वों में बदलते हैं, तो उनकी स्थिति / आकार की गणना और अद्यतन करने में लंबा समय लगेगा।

रेंडरिंग जटिलता के साथ सावधान रहें

जब यह प्रतिपादन की बात आती है तो कुछ सीएसएस गुण (धुंधला की तरह) दूसरों की तुलना में अधिक महंगे होते हैं। समान परिणाम प्राप्त करने के लिए अधिक प्रभावी तरीके सोचें।

महंगी सीएसएस गुण

कुछ सीएसएस गुण दूसरों की तुलना में अधिक महंगे हैं। इसका मतलब है कि प्रतिपादन में अधिक समय लगता है।

कुछ महंगे गुण:

• border-radius
• box-shadow
• filter
• :nth-child
• position: fixed

इसका मतलब यह नहीं है कि उनका उपयोग बिल्कुल नहीं किया जा सकता है, लेकिन आपको यह समझने की आवश्यकता है कि यदि कोई तत्व इन गुणों में से कुछ का उपयोग करता है और सैकड़ों बार प्रदान किया जाता है, तो यह प्रदर्शन को प्रभावित करेगा।

आदेश (आदेश)

आदेश मायने रखता है

आइए नजर डालते हैं ऐसे सीएसएस पर:



और फिर HTML कोड को देखें:



HTML में चयनकर्ताओं का क्रम मायने नहीं रखता है, लेकिन CSS में ऐसा होता है।

---

CSS प्रदर्शन का मूल्यांकन करने का एक अच्छा तरीका ब्राउज़र में डेवलपर टूल का उपयोग करना है।

क्रोम या फ़ायरफ़ॉक्स में, आप डेवलपर टूल खोल सकते हैं, प्रदर्शन टैब पर जा सकते हैं और रिकॉर्ड कर सकते हैं कि जब आप लोड करते हैं या अपने पेज के साथ बातचीत करते हैं।


क्रोम में प्रदर्शन टैब स्क्रीनशॉट

साधन

इस लेख के लिए विषय की व्याख्या करते हुए, मुझे नीचे सूचीबद्ध कुछ दिलचस्प उपकरण मिले हैं:

CSS Triggers एक वेबसाइट है जो कुछ CSS सुविधाओं को सूचीबद्ध करती है और वे प्रदर्शन को कैसे प्रभावित करती हैं।

Uncss CSS से अप्रयुक्त शैलियों को हटाने का एक उपकरण है।

सीएसएस-व्याख्या सीएसएस चयनकर्ताओं को समझाने वाला एक छोटा उपकरण है।

उपवास लेआउट प्रदर्शन को तेज करने के लिए DOM बैच रीड / राइट टूल है।

अभी के लिए बस इतना ही! आशा है कि यह समझ में आता है!