CSS चयनकर्ता प्रदर्शन के बारे में सच्चाई

गीज़, इसे छोड़ दें पैट्रिक ब्रॉसेट CSS प्रदर्शन पर बात करेंगे सबसे अधिक पहुंच योग्य और व्यावहारिक तरीके से। ऐसा नहीं है कि सीएसएस हमेशा होता है क्या गति पकड़ रहा है, या यहां तक ​​कि जब प्रदर्शन में सुधार की बात आती है तो सबसे कम लटका हुआ फल।

परंतु if आप चीजों के CSS पक्ष में लाभ की तलाश कर रहे हैं, पैट्रिक के पास Edge DevTools का उपयोग करके आपके सबसे महंगे चयनकर्ताओं को सूंघने का एक अच्छा तरीका है:

• DevTools को क्रैक करें।
• प्रदर्शन टैब पर जाएं।
• सुनिश्चित करें कि आपके पास "उन्नत प्रतिपादन उपकरण सक्षम करें" विकल्प सक्षम है। इसने मुझे इस प्रक्रिया में उलझा दिया।
• पेज लोड रिकॉर्ड करें।
• रिपोर्ट में "बॉटम-अप" टैब खोलें।
• अपनी पुनर्गणना की गई शैलियों का अपना आकार देखें।

यहां से, मुख्य जलप्रपात दृश्य में पुनर्परिकलित शैली की घटनाओं में से एक पर क्लिक करें और आपको एक नया "चयनकर्ता आँकड़े" टैब मिलेगा। वह सब अच्छाई देखो!

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

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

सीधा लिंक →

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• स्रोत: https://css-tricks.com/the-truth-about-css-selector-performance/