रनटाइम की परफ़ॉर्मेंस का विश्लेषण करना

Kayce Basques

रनटाइम परफ़ॉर्मेंस से पता चलता है कि लोड होने के बजाय, आपके पेज के चलने के दौरान उसकी परफ़ॉर्मेंस कैसी है. इस ट्यूटोरियल में बताया गया है कि रनटाइम की परफ़ॉर्मेंस का विश्लेषण करने के लिए, Chrome DevTools के परफ़ॉर्मेंस पैनल का इस्तेमाल कैसे किया जाता है. RAIL मॉडल की बात करें, तो इस ट्यूटोरियल में आपने जो स्किल सीखी हैं वे आपके पेज के रिस्पॉन्स, ऐनिमेशन, और इस्तेमाल में न होने वाले चरणों का विश्लेषण करने में मदद करती हैं.

शुरू करें

इस ट्यूटोरियल में, लाइव पेज पर DevTools खोला गया है. साथ ही, परफ़ॉर्मेंस पैनल का इस्तेमाल करके, पेज की परफ़ॉर्मेंस में रुकावट का पता लगाया गया है.

1. गुप्त मोड में Google Chrome खोलें. गुप्त मोड यह पक्का करता है कि Chrome साफ़ स्थिति में चले. उदाहरण के लिए, अगर आपने बहुत सारे एक्सटेंशन इंस्टॉल किए हुए हैं, तो वे एक्सटेंशन आपके परफ़ॉर्मेंस मेज़रमेंट में गड़बड़ी पैदा कर सकते हैं.

2. इस पेज को अपनी गुप्त विंडो में लोड करें. आपको प्रोफ़ाइल बनानी है. इस डेमो में आपको यह डेमो दिखेगा. पेज पर नीले रंग के कई स्क्वेयर हैं, जो ऊपर और नीचे जा रहे हैं.

   https://googlechrome.github.io/devtools-samples/jank/

3. DevTools खोलने के लिए, Command+Option+I (Mac) या Control+Shift+I (Windows, Linux) दबाएं.

   

   पहला डायग्राम. बाईं ओर मौजूद डेमो और दाईं ओर DevTools

मोबाइल सीपीयू सिम्युलेट करें

डेस्कटॉप और लैपटॉप के मुकाबले मोबाइल डिवाइसों में सीपीयू की क्षमता काफ़ी कम होती है. किसी पेज को प्रोफ़ाइल करते समय, सीपीयू थ्रॉटलिंग का इस्तेमाल करें. इससे यह पता चलेगा कि मोबाइल डिवाइसों पर आपका पेज कैसा परफ़ॉर्म कर रहा है.

1. DevTools में परफ़ॉर्मेंस टैब पर क्लिक करें.
2. पक्का करें कि स्क्रीनशॉट चेकबॉक्स चालू है.
3. कैप्चर सेटिंग पर क्लिक करें . DevTools, परफ़ॉर्मेंस मेट्रिक को कैप्चर करने के तरीके से जुड़ी सेटिंग दिखाता है.

4. सीपीयू के लिए, 2x धीमा चुनें. DevTools आपके सीपीयू को थ्रॉटल करता है, ताकि यह सामान्य से दो गुना धीमा हो जाए.

   

   दूसरा डायग्राम. सीपीयू थ्रॉटलिंग, नीले रंग में आउटलाइन की गई

डेमो सेट अप करें

रनटाइम के दौरान परफ़ॉर्मेंस का ऐसा डेमो बनाना मुश्किल है जो इस वेबसाइट के सभी पाठकों के लिए लगातार काम करता हो. इस सेक्शन की मदद से डेमो को अपनी पसंद के मुताबिक बनाया जा सकता है. इससे यह पक्का किया जा सकता है कि आपको इस ट्यूटोरियल में जो स्क्रीनशॉट और जानकारी दिखती है उनसे मिलती-जुलती जानकारी दी गई है. भले ही, आपने कोई भी सेटअप किया हो.

1. 10 जोड़ें पर तब तक क्लिक करते रहें, जब तक कि नीले रंग के स्क्वेयर, पहले से ज़्यादा धीमी रफ़्तार से न हिलने लगें. किसी महंगे मशीन पर, इस पर करीब 20 क्लिक लग सकते हैं.

2. ऑप्टिमाइज़ करें पर क्लिक करें. नीले वर्ग तेज़ी से और ज़्यादा आसानी से चलने चाहिए.

3. अन-ऑप्टिमाइज़ करें पर क्लिक करें. नीले वर्ग धीरे-धीरे और ज़्यादा जैंक के साथ मूव करते हैं.

रनटाइम की परफ़ॉर्मेंस रिकॉर्ड करें

जब आप पेज के ऑप्टिमाइज़ किए गए वर्शन को चलाते हैं, तो नीले रंग के स्क्वेयर तेज़ी से आगे बढ़ते हैं. ऐसा क्यों है? दोनों वर्शन में, हर स्क्वेयर को एक समान समयावधि में ले जाना चाहिए. ऑप्टिमाइज़ नहीं किए गए वर्शन में परफ़ॉर्मेंस में रुकावट का पता लगाने का तरीका जानने के लिए, परफ़ॉर्मेंस पैनल में एक रिकॉर्डिंग लें.

1. DevTools में, रिकॉर्ड करें पर क्लिक करें . जैसे-जैसे पेज चलता है, DevTools परफ़ॉर्मेंस मेट्रिक को कैप्चर करता है.

   

   तीसरी इमेज: पेज की प्रोफ़ाइल बनाना

2. कुछ सेकंड इंतज़ार करें.

3. बंद करें पर क्लिक करें. DevTools रिकॉर्डिंग बंद कर देता है, डेटा को प्रोसेस करता है, फिर परफ़ॉर्मेंस पैनल पर नतीजे दिखाता है.

   

   चौथी इमेज: प्रोफ़ाइल के नतीजे

वाह, इतना डेटा तो बहुत बड़ा है. चिंता न करें, जल्द ही सब कुछ समझ में आ जाएगा.

नतीजों का विश्लेषण करें

पेज की परफ़ॉर्मेंस की रिकॉर्डिंग कर लेने के बाद, यह मापा जा सकता है कि पेज की परफ़ॉर्मेंस कितनी खराब है और इसकी वजह(वजहें) पता लगाया जा सकता है.

फ़्रेम प्रति सेकंड का विश्लेषण करें

किसी भी ऐनिमेशन की परफ़ॉर्मेंस को मेज़र करने की मुख्य मेट्रिक, फ़्रेम प्रति सेकंड (एफ़पीएस) है. जब ऐनिमेशन 60 FPS (फ़्रेम प्रति सेकंड) पर चलते हैं, तो उपयोगकर्ता खुश होते हैं.

1. FPS चार्ट देखें. जब भी आपको FPS के ऊपर लाल रंग का बार दिखता है, तो इसका मतलब है कि फ़्रेमदर इतनी नीचे चली गई है कि शायद उपयोगकर्ता अनुभव को नुकसान पहुंच रहा है. आम तौर पर, हरा बार जितना ज़्यादा होता है एफ़पीएस उतना ही ज़्यादा होता है.

   

   पांचवी इमेज: नीले रंग से आउटलाइन किया गया एफ़पीएस चार्ट

2. FPS चार्ट के नीचे आपको सीपीयू चार्ट दिखता है. सीपीयू चार्ट में मौजूद रंग, परफ़ॉर्मेंस पैनल के सबसे नीचे मौजूद खास जानकारी टैब में मौजूद रंगों से मेल खाते हैं. अगर सीपीयू चार्ट में पूरा रंग मौजूद है, तो इसका मतलब है कि रिकॉर्डिंग के दौरान सीपीयू की क्षमता खत्म हो गई थी. जब भी आप देखते हैं कि सीपीयू (CPU) लंबे समय तक खत्म हो गया है, तो यह इस बात का संकेत होता है कि इस पूरे तरीके से काम को कैसे किया जा सकता है.

   

   छठी इमेज: नीले रंग से आउटलाइन किया गया सीपीयू चार्ट और खास जानकारी वाला टैब

3. अपना माउस एफ़पीएस, सीपीयू या नेट चार्ट पर घुमाएं. DevTools उस समय पर मौजूद पेज का स्क्रीनशॉट दिखाता है. रिकॉर्डिंग को फिर से चलाने के लिए, माउस को दाएं और बाएं ले जाएं. इसे स्क्रबिंग कहा जाता है और यह ऐनिमेशन की प्रोग्रेस का मैन्युअल तौर पर विश्लेषण करने के लिए काम आता है.

   

   सातवीं इमेज: रिकॉर्डिंग के 2000 मिलीसेकंड के आस-पास के पेज का स्क्रीनशॉट देखना

4. फ़्रेम सेक्शन में, अपने माउस को हरे रंग के किसी एक स्क्वेयर पर घुमाएं. DevTools आपको उस खास फ़्रेम के लिए एफ़पीएस दिखाता है. हर फ़्रेम, शायद 60 FPS के टारगेट से काफ़ी कम है.

   

   आठवीं इमेज: किसी फ़्रेम पर कर्सर घुमाना

इस डेमो से यह साफ़ तौर पर पता चलता है कि पेज अच्छा परफ़ॉर्म नहीं कर रहा है. हालांकि, असल में हो सकता है कि यह इतना साफ़ न हो कि तापमान मापने वाले इन सभी टूल का होना भी आपके लिए काम का है.

बोनस: एफ़पीएस मीटर खोलें

दूसरा इस्तेमाल करने में आसान टूल है, FPS मीटर. इससे पेज के चलने पर, FPS के लिए रीयल-टाइम अनुमान मिलते हैं.

1. निर्देश मेन्यू खोलने के लिए, Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux) दबाएं.
2. कमांड मेन्यू में, Rendering टाइप करना शुरू करें और रेंडरिंग दिखाएं को चुनें.

3. रेंडरिंग टैब में, FPS मीटर चालू करें. आपके व्यूपोर्ट के ऊपर दाईं ओर एक नया ओवरले दिखेगा.

   

   नौवीं इमेज: एफ़पीएस मीटर

4. FPS मीटर को बंद करें और रेंडरिंग टैब को बंद करने के लिए Escape दबाएं. आप उसका इस्तेमाल इस ट्यूटोरियल में नहीं करेंगे.

गैलेक्सी को ढूंढें

अब जब आपने आकलन और पुष्टि कर ली है कि ऐनिमेशन अच्छा परफ़ॉर्म नहीं कर रहा है, तो अगला सवाल यह है कि: ऐसा क्यों?

1. खास जानकारी वाले टैब पर ध्यान दें. कोई भी इवेंट नहीं चुने जाने पर, इस टैब में गतिविधि का ब्यौरा दिखता है. पेज ने अपना ज़्यादातर समय रेंडर करते हुए बिताया है. परफ़ॉर्मेंस का मतलब है कम काम करना. इसलिए, आपका लक्ष्य रेंडर करने के काम में लगने वाले समय को कम करना है.

   

   दसवीं इमेज: खास जानकारी वाला टैब, जो नीले रंग में आउटलाइन किया गया है

2. मुख्य सेक्शन को बड़ा करें. DevTools आपको समय के साथ, मुख्य थ्रेड पर हुई गतिविधि का फ़्लेम चार्ट दिखाता है. x-ऐक्सिस, समय के हिसाब से रिकॉर्डिंग को दिखाता है. हर बार किसी इवेंट के बारे में बताता है. चौड़ा बार होने का मतलब है कि इवेंट में ज़्यादा समय लगा. y-ऐक्सिस, कॉल स्टैक को दिखाता है. जब आपको एक-दूसरे के ऊपर स्टैक किए गए इवेंट दिखते हैं, तो इसका मतलब है कि ऊपरी इवेंट की वजह से कम इवेंट हुए हैं.

   

   11वीं इमेज: मुख्य सेक्शन, नीले रंग से आउटलाइन किया गया

3. रिकॉर्डिंग में काफ़ी डेटा है. सक्रिय किए गए फ़्रेम वाले किसी एक इवेंट पर ज़ूम इन करने के लिए, अपने माउस को क्लिक करके, होल्ड करके, और खास जानकारी पर खींचें और छोड़ें. यह वह सेक्शन है जिसमें FPS, CPU, और NET चार्ट शामिल हैं. मुख्य सेक्शन और खास जानकारी टैब में, रिकॉर्डिंग के चुने गए हिस्से की ही जानकारी दिखती है.

   

   इमेज 12: किसी एक ऐनिमेशन फ़्रेम के ट्रिगर किए गए इवेंट पर ज़ूम इन किया गया

4. ऐनिमेशन फ़्रेम फ़ायर किए गए इवेंट के सबसे ऊपर दाईं ओर मौजूद लाल त्रिभुज को देखें. जब भी आपको एक लाल ट्राईऐंगल दिखता है, तो यह एक चेतावनी होती है कि इस इवेंट से जुड़ी कोई समस्या हो सकती है.

5. ऐनिमेशन फ़्रेम ट्रिगर किया गया इवेंट पर क्लिक करें. खास जानकारी टैब में अब आपको उस इवेंट के बारे में जानकारी दिखेगी. दिखाएं लिंक पर ध्यान दें. इस बटन पर क्लिक करने से, वह इवेंट हाइलाइट हो जाता है जिसने ऐनिमेशन फ़्रेम फ़ायर किया गया इवेंट शुरू किया है. app.js:94 लिंक भी नोट करें. उस पर क्लिक करने से, आप सोर्स कोड में मौजूद लाइन पर पहुंच जाएंगे.

   

   इमेज 13: ऐनिमेशन फ़्रेम के ट्रिगर किए गए इवेंट के बारे में ज़्यादा जानकारी

6. app.update इवेंट के तहत, आपको बैंगनी रंग के कई इवेंट दिखेंगे. अगर वे चौड़ी होती, तो ऐसा लगता कि हर एक पर एक लाल त्रिभुज होगा. अभी बैंगनी रंग के किसी एक लेआउट इवेंट पर क्लिक करें. DevTools खास जानकारी टैब में इवेंट के बारे में ज़्यादा जानकारी देता है. दरअसल, फ़ोर्स्ड रीफ़्लो के बारे में एक चेतावनी होती है (लेआउट के लिए एक और शब्द).

7. खास जानकारी टैब में, लेआउट फ़ोर्स्ड में जाकर app.js:70 लिंक पर क्लिक करें. DevTools आपको उस कोड की लाइन पर ले जाता है जिसकी वजह से लेआउट को काम करना पड़ता है.

   

   इमेज 13: फ़ोर्स किए गए लेआउट की वजह बनने वाले कोड की लाइन

वाह! यह काम करने में बहुत समय लगता था, लेकिन अब आपके पास रनटाइम की परफ़ॉर्मेंस का विश्लेषण करने के लिए, बुनियादी वर्कफ़्लो की एक मज़बूत बुनियाद है. बढ़िया काम किया।

बोनस: ऑप्टिमाइज़ किए गए वर्शन का विश्लेषण करें

आपने अभी-अभी जो वर्कफ़्लो और टूल सीखे हैं उनका इस्तेमाल करके, ऑप्टिमाइज़ किया गया कोड चालू करने के लिए डेमो पर ऑप्टिमाइज़ करें पर क्लिक करें. इसके बाद, परफ़ॉर्मेंस को एक बार फिर रिकॉर्ड करें और नतीजों का विश्लेषण करें. मुख्य सेक्शन के फ़्लेम चार्ट में बेहतर फ़्रेम रेट से लेकर इवेंट को कम करने तक, आपको दिखेगा कि ऐप्लिकेशन का ऑप्टिमाइज़ किया गया वर्शन बहुत कम काम करता है और बेहतर परफ़ॉर्मेंस देता है.

अगले चरण

परफ़ॉर्मेंस को समझने का आधार आरएआईएल मॉडल है. इस मॉडल में आपको वे परफ़ॉर्मेंस मेट्रिक सिखाई जाती हैं जो आपके उपयोगकर्ताओं के लिए सबसे ज़्यादा ज़रूरी हैं. ज़्यादा जानने के लिए, RAIL मॉडल की मदद से परफ़ॉर्मेंस मापना देखें.

परफ़ॉर्मेंस पैनल का इस्तेमाल बेहतर तरीके से करने के लिए, प्रैक्टिस करने से बेहतरीन नतीजे मिलते हैं. अपने पेजों की प्रोफ़ाइल बनाएं और नतीजों का विश्लेषण करें. अगर अपने नतीजों के बारे में आपका कोई सवाल है, तो google-chrome-devtools से टैग किया गया स्टैक ओवरफ़्लो सवाल खोलें. अगर हो सके, तो दोबारा बनाए जा सकने वाले पेजों के स्क्रीनशॉट या लिंक शामिल करें.

रनटाइम की परफ़ॉर्मेंस में महारत हासिल करने के लिए, आपको यह सीखना होगा कि ब्राउज़र, स्क्रीन पर एचटीएमएल, सीएसएस, और JS को पिक्सल में कैसे बदलता है. सबसे पहले रेंडरिंग परफ़ॉर्मेंस की खास जानकारी देखें. फ़्रेम की एनाटॉमी में और भी ज़्यादा जानकारी दी गई है.

आखिर में, रनटाइम की परफ़ॉर्मेंस को बेहतर बनाने के कई तरीके हैं. इस ट्यूटोरियल में, ऐनिमेशन से जुड़ी एक खास समस्या पर फ़ोकस किया गया है. इससे आपको परफ़ॉर्मेंस पैनल को बेहतर तरीके से समझने में मदद मिलेगी. हालांकि, यह कई समस्याओं में से एक है. रेंडरिंग परफ़ॉर्मेंस की बाकी सीरीज़ में रनटाइम की परफ़ॉर्मेंस के अलग-अलग पहलुओं को बेहतर बनाने के बहुत सारे अच्छे सुझाव हैं, जैसे:

• JS एक्ज़ीक्यूशन को ऑप्टिमाइज़ करना
• स्टाइल कैलकुलेशन का दायरा और जटिलता कम करें
• बड़े, जटिल लेआउट, और लेआउट थ्रशिंग से बचें
• पेंट की जटिलता को कम करना और पेंट की जगह कम करना
• सिर्फ़ कंपोज़िटर वाली प्रॉपर्टी से जुड़ें और लेयर की संख्या मैनेज करें
• अपने इनपुट हैंडलर की सुविधा बंद करें