परफ़ॉर्मेंस पैनल, लंबे समय से चल रहे हर टास्क के ऊपर दाएं कोने में लाल त्रिकोण का निशान लगा देता है. साथ ही, खास जानकारी टैब में एक चेतावनी भी दिखती है. इससे, मुख्य थ्रेड पर चल रहे काम के बारे में पता चलता है, जिसे चलने में ज़्यादा समय लगता है और जिसकी परफ़ॉर्मेंस धीमी है:
आपकी परफ़ॉर्मेंस रिकॉर्डिंग में, लंबे समय तक चलने वाले इन टास्क में से कुछ, स्टाइल का फिर से हिसाब लगाएं इवेंट हो सकते हैं. स्टाइल की फिर से गिनती करें इवेंट, ब्राउज़र को ये काम करने में लगने वाला समय ट्रैक करता है:
- किसी एलिमेंट से मेल खाने वाले सीएसएस स्टाइल के सभी नियम ढूंढने के लिए, पेज पर डीओएम एलिमेंट का इस्तेमाल करें.
- हर एलिमेंट का असल स्टाइल, मिलते-जुलते सीएसएस स्टाइल के नियमों के आधार पर कंप्यूट करें.
सीएसएस के नियमों के लागू होने के दौरान, सीएसएस स्टाइल को फिर से कैलकुलेट करना ज़रूरी है. उदाहरण के लिए, जब:
- एलिमेंट को डीओएम में जोड़ा जाता है या उससे हटाया जाता है.
- एलिमेंट के एट्रिब्यूट बदल जाते हैं, जैसे कि क्लास या आईडी एट्रिब्यूट की वैल्यू.
- उपयोगकर्ता इनपुट देता है, जैसे कि माउस मूव करना या एलिमेंट का फ़ोकस बदलना. इससे
:hoverके नियमों पर असर पड़ सकता है.
स्टाइल को फिर से कैलकुलेट करने वाले इवेंट की वजह से, परफ़ॉर्मेंस में समस्या आ सकती है. साथ ही, प्रज़ेंटेशन में देर होने से आपकी वेबसाइट के इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) पर असर पड़ सकता है. अगर आपको लंबे समय से चल रहे, स्टाइल की फिर से गिनती करने वाले इवेंट मिलते हैं, तो सिलेक्टर के आंकड़े टैब का इस्तेमाल करके, यह पता लगाया जा सकता है कि किस सीएसएस सिलेक्टर में ज़्यादा समय लग रहा है और किस वजह से उनकी परफ़ॉर्मेंस खराब हो रही है.
चुनने वाले के आंकड़े टैब में, सीएसएस नियम चुनने वाले उन टूल के बारे में आंकड़े दिखाए जाते हैं जो किसी परफ़ॉर्मेंस रिकॉर्डिंग में एक या उससे ज़्यादा स्टाइल का हिसाब लगाएं इवेंट में शामिल थे.
सिलेक्टर के आंकड़े दिखाने की सुविधा चालू करके, परफ़ॉर्मेंस ट्रेस रिकॉर्ड करें
लंबे समय तक चलने वाले स्टाइल की फिर से गिनती करने वाले इवेंट के दौरान, सीएसएस नियम चुनने वाले टूल के आंकड़े देखने के लिए, सिलेक्टर के आंकड़े कैप्चर करने की सेटिंग चालू करके, एक परफ़ॉर्मेंस ट्रेस रिकॉर्ड करें.
सिलेक्टर के आंकड़ों की मदद से परफ़ॉर्मेंस ट्रेस रिकॉर्ड करने के लिए:
कोई वेब पेज खोलें, उदाहरण के लिए, फ़ोटो गैलरी डेमो पेज.
DevTools खोलें और परफ़ॉर्मेंस पैनल पर जाएं.
परफ़ॉर्मेंस पैनल में, सेटिंग कैप्चर सेटिंग बटन पर क्लिक करें और चेक_बॉक्स सीएसएस चुनने वाले के आंकड़े चालू करें पर सही का निशान लगाएं.
radio_button_checked रिकॉर्ड करें पर क्लिक करें. इसके बाद, उस स्थिति को चलाएं जिसे आपको बेहतर बनाना है. इसके बाद, radio_button_checked बंद करें पर क्लिक करें.
इसके बाद, अगले सेक्शन में बताए गए तरीके से, सीएसएस सिलेक्टर के आंकड़े देखें.
किसी एक इवेंट के लिए, सीएसएस नियम चुनने वाले के आंकड़े देखना
किसी एक स्टाइल को फिर से कैलकुलेट करें इवेंट में शामिल सीएसएस नियम सिलेक्टर के आंकड़े देखने के लिए:
सिलेक्टर के आंकड़े दिखाने की सुविधा चालू करके, परफ़ॉर्मेंस ट्रेस रिकॉर्ड करें.
अपनी परफ़ॉर्मेंस रिकॉर्डिंग में, स्टाइल की फिर से गणना करें इवेंट ढूंढें और उस पर क्लिक करें.
परफ़ॉर्मेंस पैनल के सबसे नीचे वाले सेक्शन में, चुनने वाले के आंकड़े टैब खोलें.
सिलेक्टर के आंकड़े वाले टैब में, सीएसएस सिलेक्टर की टेबल
चुनने वाले के आंकड़े टैब में, सीएसएस सिलेक्टर की एक टेबल होती है. टेबल में हर सीएसएस सिलेक्टर के लिए, यहां दी गई जानकारी दिखती है:
| कॉलम | ब्यौरा |
|---|---|
| बीता समय (मि॰से॰) | वह समय जो ब्राउज़र ने इस सीएसएस सिलेक्टर से मिलता-जुलता है. यह समय मिलीसेकंड (मि॰से॰) में दिया जाता है, जहां 1 मि॰से॰ की वैल्यू 1/1000 सेकंड होती है. |
| मैच करने की कोशिशें | उन एलिमेंट की संख्या जिन्हें ब्राउज़र इंजन ने इस सीएसएस सिलेक्टर से मैच करने की कोशिश की है. |
| मैच करने की संख्या | ब्राउज़र इंजन, इस सीएसएस सिलेक्टर से मेल खाने वाले एलिमेंट की संख्या. |
| धीमे पाथ वाले गैर-मेलों का % | उन एलिमेंट का अनुपात जो इस सीएसएस सिलेक्टर से मैच नहीं करते और ब्राउज़र इंजन ने जिन एलिमेंट को मैच करने की कोशिश की और जिन्हें मैच करने के लिए ब्राउज़र इंजन को कम ऑप्टिमाइज़ किए गए कोड का इस्तेमाल करना पड़ा. |
| चुनने वाला | मेल खाने वाला सीएसएस सिलेक्टर. |
| Style Sheet | सीएसएस स्टाइल शीट, जिसमें सीएसएस सिलेक्टर है. |
काम पूरा होने के बाद, परफ़ॉर्मेंस पैनल में सेटिंग कैप्चर सेटिंग खोलें और चेक_बॉक्स सीएसएस चुनने वाले के आंकड़े चालू करें से सही का निशान हटाएं.
एक से ज़्यादा इवेंट के लिए सीएसएस नियम सिलेक्टर के आंकड़े देखना
स्टाइल की फिर से गणना करने वाले कई इवेंट में शामिल सीएसएस नियम चुनने वाले के एग्रीगेट आंकड़े देखने के लिए, नीचे बताए गए तरीके से सिलेक्टर के आंकड़ों की कई टेबल को स्प्रेडशीट में कॉपी करें:
सिलेक्टर के आंकड़े दिखाने की सुविधा चालू करके, परफ़ॉर्मेंस ट्रेस रिकॉर्ड करें.
अपनी पसंद का पहला स्टाइल इवेंट ढूंढें और फिर उस पर क्लिक करें.
परफ़ॉर्मेंस पैनल के सबसे नीचे वाले सेक्शन में, चुनने वाले के आंकड़े टैब खोलें.
सिलेक्टर के आंकड़ों की टेबल पर राइट क्लिक करें और टेबल कॉपी करें चुनें.
टेबल को Google Sheets जैसी किसी स्प्रेडशीट में चिपकाएं.
अपनी पसंद के अन्य स्टाइल इवेंट के साथ पिछले चरण दोहराएं.
काम पूरा होने के बाद, परफ़ॉर्मेंस पैनल में सेटिंग कैप्चर सेटिंग खोलें और चेक_बॉक्स सीएसएस चुनने वाले के आंकड़े चालू करें से सही का निशान हटाएं.
पूरी रिकॉर्डिंग के लिए, सीएसएस नियम चुनने वाले के एग्रीगेट किए गए आंकड़े देखना
पूरी परफ़ॉर्मेंस रिकॉर्डिंग में शामिल सीएसएस नियम सिलेक्टर के एग्रीगेट आंकड़े देखने के लिए:
सिलेक्टर के आंकड़े दिखाने की सुविधा चालू करके, परफ़ॉर्मेंस ट्रेस रिकॉर्ड करें.
चुने गए किसी भी इवेंट से चुने हुए का निशान हटाने के लिए, फ़्लेम चार्ट के किसी खाली हिस्से पर क्लिक करें.
रिकॉर्डिंग की पूरी रेंज चुनें. ऐसा करने के लिए, परफ़ॉर्मेंस पैनल के सबसे ऊपर मौजूद सीपीयू चार्ट पर दो बार क्लिक करें.
परफ़ॉर्मेंस पैनल के सबसे नीचे वाले सेक्शन में, चुनने वाले के आंकड़े टैब खोलें. आपको सबसे ऊपर एक नई लाइन दिखेगी, जिसमें सभी सिलेक्टर के कुल डेटा का डेटा होगा.
काम पूरा होने के बाद, परफ़ॉर्मेंस पैनल में सेटिंग कैप्चर सेटिंग खोलें और चेक_बॉक्स सीएसएस चुनने वाले के आंकड़े चालू करें से सही का निशान हटाएं.
सीएसएस सिलेक्टर के आंकड़ों का विश्लेषण करें
चुनने वाले के आंकड़े टेबल में मौजूद डेटा को बढ़ते या घटते क्रम में लगाने के लिए, कॉलम हेडर पर क्लिक करें. उदाहरण के लिए, यह देखने के लिए कि कौनसे सीएसएस सिलेक्टर सबसे ज़्यादा समय लेते हैं, बीता हुआ (मि॰से॰) कॉलम हेडर पर क्लिक करें.
अपने वेब पेज की परफ़ॉर्मेंस को बेहतर बनाने के लिए, इन सीएसएस सिलेक्टर पर ध्यान दें:
- कैलकुलेट करने में बहुत ज़्यादा समय लगा (ज़्यादा बीते हुए (मि॰से॰) वैल्यू).
- जिसे ब्राउज़र ने कई बार मैच करने की कोशिश की है (मैच करने की कोशिशों की ज़्यादा वैल्यू).
- कौनसा ब्राउज़र, असल में कई एलिमेंट से मैच नहीं करता (मैच की कोशिशों की वैल्यू की तुलना में, मैच की संख्या की कम वैल्यू).
- जिनमें स्लो पाथ के मैच न होने वाले कीवर्ड का प्रतिशत ज़्यादा है.
उदाहरण के लिए, पिछले स्क्रीनशॉट में:
- पहले सीएसएस सिलेक्टर (
html body .ps[tooltip...) को चुनने में सबसे ज़्यादा समय लगा. - ब्राउज़र इंजन ने इस सीएसएस सिलेक्टर से 1104 बार मैच करने की कोशिश की, लेकिन वह किसी एलिमेंट से मैच नहीं हुआ.
इसलिए, यह सीएसएस सिलेक्टर, सुधार करने की कोशिश करने वाला पहला विकल्प है.
अपने सीएसएस सिलेक्टर को बदलने की कोशिश करें, ताकि उन्हें पेज के कम एलिमेंट का हिसाब लगाने और उनका मिलान करने में कम समय लगे. सीएसएस सिलेक्टर को बेहतर बनाने का तरीका, इस्तेमाल के खास उदाहरण पर निर्भर करता है.
इस ट्यूटोरियल में दिया गया तरीका दोहराकर पुष्टि करें कि आपके बदलावों की वजह से, समय बीतने वाले (मि॰से॰) कॉलम में स्टाइल इवेंट की अवधि को कम किया गया है.