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