रनटाइम के दौरान परफ़ॉर्मेंस का मतलब है कि लोड होने के बजाय, चलने के दौरान आपका पेज कैसा परफ़ॉर्म करता है. इस ट्यूटोरियल में, रनटाइम की परफ़ॉर्मेंस का विश्लेषण करने के लिए, Chrome DevTools के परफ़ॉर्मेंस पैनल को इस्तेमाल करने का तरीका बताया गया है. RAIL मॉडल की बात करें, तो इस ट्यूटोरियल में आपने जो स्किल सीखी हैं वे आपके पेज के रिस्पॉन्स, ऐनिमेशन, और कुछ समय से इस्तेमाल न होने वाले चरणों का विश्लेषण करने में मदद करेंगी.
शुरू करें
इस ट्यूटोरियल में, लाइव पेज पर DevTools खोला जाता है. साथ ही, परफ़ॉर्मेंस पैनल का इस्तेमाल करके, पेज पर परफ़ॉर्मेंस से जुड़ी समस्या का पता लगाया जाता है.
- Google Chrome को गुप्त मोड में खोलें. गुप्त मोड यह पक्का करता है कि Chrome साफ़ स्थिति में चले. उदाहरण के लिए, अगर आपने बहुत सारे एक्सटेंशन इंस्टॉल किए हैं, तो वे एक्सटेंशन आपके परफ़ॉर्मेंस मेज़रमेंट को बेहतर बना सकते हैं.
इस पेज को अपनी गुप्त विंडो में लोड करें. आप इस डेमो में प्रोफ़ाइल बनाने जा रहे हैं. इस पेज पर, नीले रंग के कई छोटे-छोटे स्क्वेयर दिख रहे हैं. ये स्क्वेयर, ऊपर और नीचे की ओर जाते हुए दिखते हैं.
https://googlechrome.github.io/devtools-samples/jank/DevTools खोलने के लिए, Command+Option+I (Mac) या Control+Shift+I (Windows, Linux) दबाएं.
पहला डायग्राम. बाईं ओर डेमो और दाईं ओर DevTools
मोबाइल सीपीयू सिम्युलेट करें
डेस्कटॉप और लैपटॉप के मुकाबले मोबाइल डिवाइसों में सीपीयू की क्षमता कम होती है. किसी पेज को प्रोफ़ाइल करने के लिए, सीपीयू थ्रॉटलिंग का इस्तेमाल करें, ताकि यह देखा जा सके कि मोबाइल डिवाइस पर आपका पेज कैसा परफ़ॉर्म कर रहा है.
- DevTools में परफ़ॉर्मेंस टैब पर क्लिक करें.
- पक्का करें कि स्क्रीनशॉट चेकबॉक्स चालू है.
- कैप्चर सेटिंग पर क्लिक करें
.
DevTools, परफ़ॉर्मेंस मेट्रिक को कैप्चर करने के तरीके से जुड़ी सेटिंग दिखाता है. सीपीयू के लिए, 2x धीमा चुनें. DevTools आपके सीपीयू को थ्रॉटल कर देता है, ताकि यह सामान्य से दो गुना धीमा हो जाए.
दूसरा डायग्राम. सीपीयू थ्रॉटलिंग, नीले रंग में आउटलाइन किया गया
डेमो सेट अप करें
रनटाइम के दौरान परफ़ॉर्मेंस का ऐसा डेमो बनाना मुश्किल है जो इस वेबसाइट के सभी पाठकों के लिए लगातार काम करे. इस सेक्शन की मदद से डेमो को अपनी पसंद के मुताबिक बनाया जा सकता है. इससे यह पक्का किया जा सकता है कि आपको इस ट्यूटोरियल में दिखने वाले स्क्रीनशॉट और जानकारी के अनुभव के हिसाब से ही कोई स्क्रीनशॉट या वीडियो शेयर किया जाए. भले ही, आपने किसी भी तरह का सेटअप किया हो.
- 10 जोड़ें पर तब तक क्लिक करते रहें, जब तक कि नीले रंग के स्क्वेयर पहले से धीरे चलने न लगें. किसी हाई-एंड मशीन पर, 20 क्लिक तक लग सकते हैं.
ऑप्टिमाइज़ करें पर क्लिक करें. नीले वर्गों को तेज़ी से और ज़्यादा आसानी से चलना चाहिए.
अन-ऑप्टिमाइज़ करें पर क्लिक करें. नीले रंग के स्क्वेयर धीरे-धीरे और ज़्यादा जैंक के साथ मूव होते हैं.
रनटाइम की परफ़ॉर्मेंस रिकॉर्ड करें
जब पेज का ऑप्टिमाइज़ किया गया वर्शन चलाया जाता है, तो नीले रंग के स्क्वेयर तेज़ी से चलते हैं. Why is that? दोनों वर्शन में, हर स्क्वेयर को समान समय में समान जगह मूव करना चाहिए. जो वर्शन ऑप्टिमाइज़ नहीं किया गया है उसमें परफ़ॉर्मेंस बॉटलनेक का पता लगाने का तरीका जानने के लिए, परफ़ॉर्मेंस पैनल में रिकॉर्डिंग करें.
DevTools में, रिकॉर्ड करें
पर क्लिक करें. जैसे-जैसे पेज चलता है, DevTools
परफ़ॉर्मेंस मेट्रिक को कैप्चर करता है.
इमेज 3: पेज की प्रोफ़ाइल बनाना
कुछ सेकंड इंतज़ार करें.
बंद करें पर क्लिक करें. DevTools रिकॉर्डिंग बंद कर देता है, डेटा को प्रोसेस करता है, और फिर परफ़ॉर्मेंस पैनल पर नतीजे दिखाता है.
इमेज 4: प्रोफ़ाइल के नतीजे
वाह, इतना डेटा तो बहुत बड़ा है. चिंता न करें, सब कुछ जल्द ही समझ आएगा.
नतीजों का विश्लेषण करें
पेज की परफ़ॉर्मेंस की रिकॉर्डिंग मिल जाने के बाद, यह मापा जा सकता है कि पेज की परफ़ॉर्मेंस कितनी खराब है और इसकी वजह(वजहों) का पता लगाया जा सकता है.
फ़्रेम प्रति सेकंड का विश्लेषण करें
किसी भी ऐनिमेशन की परफ़ॉर्मेंस को मापने की मुख्य मेट्रिक, फ़्रेम प्रति सेकंड (FPS) है. जब ऐनिमेशन 60 FPS पर चलते हैं, तो उपयोगकर्ता खुश होते हैं.
FPS चार्ट देखें. जब भी आपको FPS के ऊपर लाल रंग का बार दिखता है, तो इसका मतलब है कि फ़्रेमरेट इतनी कम गिर गया है कि शायद उपयोगकर्ता अनुभव को नुकसान पहुंच रहा है. आम तौर पर, हरा बार जितना ज़्यादा होगा एफ़पीएस उतना ही ज़्यादा होगा.
इमेज 5: नीले रंग से आउटलाइन किया गया FPS चार्ट
FPS चार्ट के नीचे आपको सीपीयू चार्ट दिखता है. सीपीयू चार्ट में रंग, परफ़ॉर्मेंस पैनल के सबसे नीचे खास जानकारी टैब में मौजूद रंगों के मुताबिक होते हैं. अगर सीपीयू का पूरा रंग भरा हुआ है, तो इसका मतलब है कि रिकॉर्डिंग के दौरान सीपीयू एक्सट्रैक्ट हो गया था. जब भी आप देखते हैं कि सीपीयू का इस्तेमाल ज़्यादा समय के लिए हो गया है, तो यह कम काम करने के तरीके ढूंढने की ओर इशारा करता है.
इमेज 6: नीले रंग से आउटलाइन किया गया सीपीयू चार्ट और खास जानकारी वाला टैब
अपना माउस FPS, CPU या NET चार्ट पर घुमाएं. DevTools उस समय पेज का स्क्रीनशॉट दिखाता है. रिकॉर्डिंग को फिर से चलाने के लिए, माउस को दाएं और बाएं ले जाएं. इसे स्क्रबिंग कहा जाता है और यह ऐनिमेशन की प्रोग्रेस का मैन्युअल तौर पर विश्लेषण करने के लिए उपयोगी है.
इमेज 7: रिकॉर्डिंग के 2,000 मिलीसेकंड के आस-पास के पेज का स्क्रीनशॉट देखना
फ़्रेम सेक्शन में, अपने माउस को हरे रंग के किसी एक स्क्वेयर पर घुमाएं. DevTools आपको उस खास फ़्रेम के लिए एफ़पीएस दिखाता है. ऐसा हो सकता है कि हर फ़्रेम, 60 FPS के टारगेट से काफ़ी कम हो.
इमेज 8: फ़्रेम पर कर्सर घुमाना
इस डेमो से यह साफ़ तौर पर पता चलता है कि पेज अच्छा परफ़ॉर्म नहीं कर रहा है. हालांकि, असल में हो सकता है कि स्थितियों में यह इतनी साफ़ न हो, इसलिए माप लेने के लिए इन सभी टूल का होना बेहद ज़रूरी है.
बोनस: FPS मीटर खोलें
एक और आसान टूल FPS मीटर है, जो पेज चलने पर FPS के लिए रीयल-टाइम अनुमान देता है.
- निर्देश मेन्यू खोलने के लिए, Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux) दबाएं.
- कमांड मेन्यू में
Renderingटाइप करना शुरू करें और रेंडरिंग दिखाएं को चुनें. रेंडरिंग टैब में, FPS मीटर चालू करें. आपके व्यूपोर्ट पर सबसे ऊपर दाईं ओर एक नया ओवरले दिखेगा.
इमेज 9: FPS मीटर
FPS मीटर को बंद करें और रेंडरिंग टैब को बंद करने के लिए Escape दबाएं. आप इस ट्यूटोरियल में उसका इस्तेमाल नहीं करेंगे.
बॉटलनेक ढूंढें
अब जब आपने यह आकलन और पुष्टि कर ली है कि ऐनिमेशन अच्छा परफ़ॉर्म नहीं कर रहा है, तो अगला सवाल है: ऐसा क्यों?
'खास जानकारी' टैब पर ध्यान दें. कोई भी इवेंट नहीं चुनने पर, यह टैब आपको गतिविधि का ब्यौरा दिखाता है. पेज ने ज़्यादातर समय रेंडरिंग की है. परफ़ॉर्मेंस का मतलब है, कम मेहनत करना. इसलिए, आपका लक्ष्य रेंडरिंग के काम में लगने वाले समय को कम करना है.
इमेज 10: नीले रंग से आउटलाइन किया गया खास जानकारी टैब
मुख्य सेक्शन को बड़ा करें. DevTools आपको समय के साथ, मुख्य थ्रेड पर होने वाली गतिविधि का एक फ़्लेम चार्ट दिखाता है. x-ऐक्सिस समय के साथ रिकॉर्डिंग को दिखाता है. हर बार किसी इवेंट को दिखाता है. बार चौड़ा होने का मतलब है कि इवेंट में ज़्यादा समय लगा. y-ऐक्सिस, कॉल स्टैक को दिखाता है. जब आपको इवेंट एक-दूसरे के ऊपर दिखते हैं, तो इसका मतलब है कि ऊपरी इवेंट की वजह से इवेंट कम हुए हैं.
इमेज 11: मुख्य सेक्शन, नीले रंग से आउटलाइन किया गया
रिकॉर्डिंग में काफ़ी डेटा है. किसी ऐनिमेशन फ़्रेम ट्रिगर किया गया इवेंट पर ज़ूम इन करने के लिए, खास जानकारी पर क्लिक करके, होल्ड करके रखें और फिर अपने माउस को खींचकर छोड़ें. यह ऐसा सेक्शन है जिसमें FPS, CPU, और NET चार्ट शामिल हैं. मुख्य सेक्शन और खास जानकारी टैब, सिर्फ़ रिकॉर्डिंग के चुने गए हिस्से की जानकारी दिखाते हैं.
इमेज 12: किसी एक ऐनिमेशन फ़्रेम के ट्रिगर किए गए इवेंट पर ज़ूम इन किया गया
ऐनिमेशन फ़्रेम ट्रिगर किया गया इवेंट के ऊपर दाईं ओर मौजूद लाल त्रिभुज को देखें. जब भी आपको एक लाल त्रिकोण दिखता है, तो यह एक चेतावनी होती है कि इस इवेंट से जुड़ी कोई समस्या हो सकती है.
ऐनिमेशन फ़्रेम ट्रिगर किया गया इवेंट पर क्लिक करें. खास जानकारी टैब में अब आपको उस इवेंट के बारे में जानकारी दिखेगी. दिखाएं लिंक पर ध्यान दें. ऐसा करने पर, DevTools उस इवेंट को हाइलाइट कर देता है जिससे ऐनिमेशन फ़्रेम ट्रिगर किया गया इवेंट शुरू हुआ है. app.js:94 लिंक पर भी ध्यान दें. इस पर क्लिक करने से, आप सोर्स कोड में काम की लाइन पर पहुंच जाएंगे.
इमेज 13: ऐनिमेशन फ़्रेम ट्रिगर किए गए इवेंट के बारे में ज़्यादा जानकारी
app.update इवेंट में, बैंगनी रंग के कई इवेंट हैं. अगर वे चौड़ी थीं, तो ऐसा लगता है कि हर एक में एक लाल त्रिभुज हो सकता है. अभी बैंगनी रंग के किसी एक लेआउट इवेंट पर क्लिक करें. DevTools खास जानकारी टैब में इवेंट के बारे में ज़्यादा जानकारी देता है. दरअसल, फ़ोर्स्ड रीफ़्लो के बारे में एक चेतावनी है (लेआउट के लिए एक और शब्द).
खास जानकारी टैब में, ज़बरदस्ती लेआउट के नीचे app.js:70 लिंक पर क्लिक करें. DevTools आपको उस कोड की उस लाइन पर ले जाता है जिसने लेआउट को ज़बरदस्ती लागू किया था.
इमेज 13: फ़ोर्स किए गए लेआउट की वजह बनी कोड की लाइन
वाह! यह बहुत मुश्किल काम था, लेकिन अब आपके पास रनटाइम की परफ़ॉर्मेंस का विश्लेषण करने के लिए बुनियादी वर्कफ़्लो की अच्छी बुनियाद है. बढ़िया काम किया।
बोनस: ऑप्टिमाइज़ किए गए वर्शन का विश्लेषण करें
हाल ही में सीखे गए वर्कफ़्लो और टूल का इस्तेमाल करके, ऑप्टिमाइज़ किया गया कोड चालू करने के लिए, डेमो पर ऑप्टिमाइज़ करें पर क्लिक करें. इसके बाद, परफ़ॉर्मेंस को रिकॉर्ड करके, फिर से नतीजों का विश्लेषण करें. बेहतर फ़्रेमरेट से लेकर मुख्य सेक्शन के फ़्लेम चार्ट में इवेंट को कम करने तक, देखा जा सकता है कि ऐप्लिकेशन का ऑप्टिमाइज़ किया गया वर्शन बहुत कम काम करता है. इससे परफ़ॉर्मेंस बेहतर होती है.
अगले चरण
परफ़ॉर्मेंस को समझने का आधार RAIL मॉडल है. इस मॉडल में आपको उन परफ़ॉर्मेंस मेट्रिक की जानकारी दी जाती है जो आपके उपयोगकर्ताओं के लिए सबसे ज़्यादा ज़रूरी हैं. ज़्यादा जानने के लिए, RAIL मॉडल की मदद से परफ़ॉर्मेंस मापना देखें.
परफ़ॉर्मेंस पैनल को बेहतर तरीके से इस्तेमाल करने के लिए, प्रैक्टिस पैनल को बेहतर बनाएं. अपने पेजों की प्रोफ़ाइल बनाएं और
नतीजों का विश्लेषण करें. अगर आपको नतीजों के बारे में कुछ पूछना है, तो google-chrome-devtools से टैग किया गया स्टैक ओवरफ़्लो सवाल खोलें. अगर हो सके, तो उन पेजों के स्क्रीनशॉट या लिंक शामिल करें जिन्हें
दोबारा बनाया जा सकता है.
रनटाइम की परफ़ॉर्मेंस में महारत हासिल करने के लिए, आपको यह सीखना होगा कि ब्राउज़र, स्क्रीन पर एचटीएमएल, सीएसएस, और JS को पिक्सल में कैसे बदलता है. रेंडरिंग परफ़ॉर्मेंस की खास जानकारी देखना, शुरुआत करने के लिए सबसे अच्छा तरीका है. फ़्रेम की एनाटॉमी में, इसके बारे में और भी ज़्यादा विस्तार से बताया गया है.
आख़िर में, रनटाइम की परफ़ॉर्मेंस को बेहतर बनाने के कई तरीके हैं. इस ट्यूटोरियल में, आपको ऐनिमेशन से जुड़ी एक समस्या पर फ़ोकस किया गया है, ताकि आपको परफ़ॉर्मेंस पैनल के बारे में जानकारी दी जा सके. हालांकि, यह उन कई रुकावटों में से एक है जिनका आपको सामना करना पड़ सकता है. रेंडरिंग परफ़ॉर्मेंस की बाकी सीरीज़ में रनटाइम परफ़ॉर्मेंस के अलग-अलग पहलुओं को बेहतर बनाने के लिए कई अच्छे सुझाव हैं, जैसे: