Chrome 124 से JavaScript प्रोफ़ाइलर पैनल बंद होने वाला है. आने वाले समय में, Node.js सीपीयू की परफ़ॉर्मेंस को प्रोफ़ाइल करने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल करें.
हम JavaScript प्रोफ़ाइलर का इस्तेमाल क्यों बंद कर रहे हैं? (JS प्रोफ़ाइलर)
Chrome 58 की शुरुआत में, DevTools टीम ने JS प्रोफ़ाइलर को बंद करने का प्लान बनाया. इसके कई कारण हैं:
- इसे अब डेवलप नहीं किया जा रहा है. JS प्रोफ़ाइलर को कई सालों से कोई बड़ा अपडेट नहीं मिला है और टीम के पास इसे डेवलप करने के लिए संसाधन नहीं हैं.
- प्रोफ़ाइलिंग का ज़्यादा सुविधाजनक अनुभव. परफ़ॉर्मेंस पैनल का इस्तेमाल पहले से ही सभी तरह के परफ़ॉर्मेंस के विश्लेषण के लिए किया जा रहा है. साथ ही, इसकी मदद से Node.js में JavaScript सीपीयू की परफ़ॉर्मेंस को अलग-अलग प्रोफ़ाइल में पेश किया जा सकता है, ताकि एक जैसा अनुभव मिल सके और परफ़ॉर्मेंस बेहतर हो सके, इसके लिए हर चीज़ को एक ही जगह पर इकट्ठा किया जा सकता है.
- परफ़ॉर्मेंस पैनल बेहतर है. हम इसमें नई-नई सुविधाएं जोड़कर इसे लगातार बेहतर बना रहे हैं. इससे यह टूल, परफ़ॉर्मेंस का विश्लेषण करने वाला ज़्यादा असरदार और उपयोगकर्ता के लिए आसान हो जाता है.
बंद करने के बाद आपको क्या करना चाहिए?
JavaScript सीपीयू की परफ़ॉर्मेंस को प्रोफ़ाइल करने के तरीके के बारे में ज़्यादा जानने के लिए, Profile Node.js की परफ़ॉर्मेंस देखें.
परफ़ॉर्मेंस पैनल का इस्तेमाल करने से जुड़ी कुछ सलाह यहां दी गई है:
- परफ़ॉर्मेंस में आ रही रुकावटों की पहचान करने के लिए, फ़्लेम चार्ट का इस्तेमाल करें.
- फ़ंक्शन के बीच के संबंध को समझने के लिए, बॉटम-अप और कॉल ट्री टैब का इस्तेमाल करें.
हम हटाए जाने की प्रक्रिया को कैसे हैंडल करते हैं?
हमने एक प्रोटोटाइप बनाया है और डेवलपर से सुझाव पाने के लिए, GitHub पर टिप्पणियों के लिए अनुरोध (आरएफ़सी) को सार्वजनिक तौर पर पब्लिश किया है.
साथ ही, हम प्रोटोटाइप की जांच करने के लिए डेवलपर विशेषज्ञों से संपर्क करते हैं और सभी समस्याओं को ठीक करके, यह पक्का करते हैं कि परफ़ॉर्मेंस पैनल प्रोफ़ाइल की ज़रूरी शर्तों को पूरा करता हो.
हम JS प्रोफ़ाइलर को चार चरणों में धीरे-धीरे बंद किया जा रहा है, ताकि डेवलपर को इनमें बदलाव करने और उन्हें अपनाने के लिए काफ़ी समय मिल सके.
मुख्य समस्याएं और उन्हें ठीक करने का तरीका
हमें मिले सुझावों में, तीन मुख्य मुद्दों पर फ़ोकस किया गया:
.cpuprofileफ़ाइल फ़ॉर्मैट के साथ काम करता है. JS प्रोफ़ाइलर किसी दूसरे फ़ाइल फ़ॉर्मैट का इस्तेमाल करता है. परफ़ॉर्मेंस पैनल में यह सुविधा काम करनी चाहिए.- लोड होने की धीमी स्पीड. पैनल के लोड होने की स्पीड धीमी लग रही थी, जिसकी वजह से प्रोफ़ाइल बनाने की प्रोसेस में रुकावट आ रही थी.
- JavaScript वीएम सिलेक्टर मौजूद नहीं है. JavaScript वीएम इंस्टेंस चुनने की सुविधा न होने पर, कुछ मामलों में प्रोफ़ाइल बनाने की सीमित सुविधाएं मिलती हैं.
आइए, इन सभी समस्याओं पर नज़र डालते हैं और देखते हैं कि हमने इन्हें कैसे ठीक किया है.
धीमी लोडिंग स्पीड
डेवलपर ने हमें बताया कि परफ़ॉर्मेंस पैनल को बड़ी डेटा फ़ाइलें लोड करने में बहुत ज़्यादा समय लगा और कभी-कभी यह क्रैश भी हो जाता है.
हमने DevTools का विश्लेषण करने के लिए, DevTools का इस्तेमाल किया. इसे "DevTool-on-Dev टूल" कहा जाता है. हमने समस्याओं का पता लगाया और कई ऑप्टिमाइज़ेशन किए:
SetकोArrayडेटा स्ट्रक्चर से बदला गया.- गै़र-ज़रूरी
Mapडेटा स्ट्रक्चर को हटाया गया. - मेमोरी स्टैक के इस्तेमाल को कम करने के लिए, लूप के लिए बार-बार इस्तेमाल होने वाले फ़ंक्शन.
इन समस्याओं को ठीक करके, हमने बड़ी फ़ाइलों को लोड होने की प्रोसेस को 80% तेज़ कर दिया है! 🎉
हमने इस ब्लॉग पोस्ट में क्या-क्या जाना, इस बारे में ज़्यादा पढ़ें: परफ़ॉर्मेंस पैनल के ज़रिए, 400% ज़्यादा तेज़ परफ़ॉर्मेंस पैनल.
JavaScript वीएम सिलेक्टर मौजूद नहीं है
शुरुआती प्रोटोटाइप में JavaScript वीएम सिलेक्टर मौजूद नहीं था. डेवलपर इसका इस्तेमाल ड्रिल-डाउन करने और किसी खास वीएम इंस्टेंस का विश्लेषण करने के लिए करते हैं.
अब हमने परफ़ॉर्मेंस पैनल में, JavaScript वीएम सिलेक्टर जोड़ दिया है. इसमें, सभी उपलब्ध JavaScript वीएम इंस्टेंस की ड्रॉप-डाउन सूची दिखती है. किसी इंस्टेंस को चुनने पर, परफ़ॉर्मेंस पैनल उस इंस्टेंस के लिए सीपीयू प्रोफ़ाइल को लोड करता है.
cpuprofile फ़ाइल फ़ॉर्मैट के साथ काम करता है
पहले, परफ़ॉर्मेंस पैनल सिर्फ़ ट्रेस फ़ाइलों के साथ काम करता था. ये वे JSON फ़ाइलें होती हैं जिनमें ट्रेस इवेंट के कलेक्शन वाली JSON फ़ाइलें होती हैं.
दूसरी ओर, JS प्रोफ़ाइलर पर काम करने वाली सीपीयू प्रोफ़ाइल, जो .cpuprofile एक्सटेंशन वाली ऐसी फ़ाइलें होती हैं जिनमें JSON ऑब्जेक्ट होता है. वे इस तरह दिखती हैं:
{
// The list of profile nodes. First item is the root node.
nodes: ProfileNode[];
// Profiling start timestamp in microseconds.
startTime: number;
// Profiling end timestamp in microseconds.
endTime: number;
// Ids of samples at top nodes.
samples?: integer[];
// Time intervals between adjacent samples in microseconds.
// The first delta is relative to the profile startTime.
timeDeltas?: integer[];
}
नए वर्कफ़्लो की वजह से, डेवलपर को मौजूदा cpuprofile का विश्लेषण करने से नहीं रोका जाना चाहिए. इसलिए, परफ़ॉर्मेंस पैनल अब ट्रेस फ़ाइलों और सीपीयू प्रोफ़ाइल, दोनों के साथ काम करता है. cpuprofile फ़ाइल को परफ़ॉर्मेंस में इंपोर्ट किया जा सकता है. इसके बाद, वह सही तरीके से लोड होगी.
पर्दे के पीछे, हम रेगुलर एक्सप्रेशन का इस्तेमाल करके ऑब्जेक्ट स्ट्रक्चर के अंतर का पता लगाते हैं. अगर फ़ाइल का कॉन्टेंट {"nodes":[ से शुरू होता है, तो यह एक सीपीयू प्रोफ़ाइल है. नहीं तो, यह एक ट्रेस फ़ाइल है.
कॉन्टेंट टाइप की पहचान होने के बाद, हम उसे प्रोसेस करते हैं. ट्रेस फ़ाइल के लिए, हम इवेंट पार्स करते हैं और एक टाइमलाइन बनाते हैं. सीपीयू प्रोफ़ाइल के लिए, हम JSON ऑब्जेक्ट को पार्स करते हैं और फ़्लेम चार्ट बनाते हैं.
नतीजा
वेबसाइट और Node.js और Deno ऐप्लिकेशन, दोनों में सीपीयू की परफ़ॉर्मेंस की प्रोफ़ाइल बनाने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल करें. इससे आपकी साइट की प्रोफ़ाइल को बेहतर तरीके से बनाया जा सकेगा.
अगर आपके पास कोई सुझाव या राय है, तो इस गड़बड़ी पर टिप्पणी करें या नीचे दिए गए विकल्पों में से किसी एक का इस्तेमाल करके हमसे संपर्क करें.
झलक दिखाने वाले चैनलों को डाउनलोड करें
अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome के कैनरी, डेव या बीटा वर्शन का इस्तेमाल करें. झलक दिखाने वाले इन चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, सबसे नए वेब प्लैटफ़ॉर्म एपीआई टेस्ट करने और उपयोगकर्ताओं के ऐसा करने से पहले ही, अपनी साइट पर समस्याओं का पता लगाने में मदद मिलती है!
Chrome DevTools टीम से संपर्क करना
पोस्ट में मौजूद नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में बताने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com के ज़रिए हमें कोई सुझाव या सुझाव सबमिट करें.
- DevTools में ज़्यादा विकल्प
> सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें पर जाकर, DevTools से जुड़ी समस्या की शिकायत करें. - @ChromeDevTool पर ट्वीट करें.
- DevTools YouTube वीडियो या DevTools सलाह वाले YouTube वीडियो में नया क्या है, इस बारे में टिप्पणियां करें.