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