Chrome 124 में JavaScript प्रोफ़ाइलर पैनल को बंद किया जा रहा है. Node.js के सीपीयू की परफ़ॉर्मेंस का इस्तेमाल करने के लिए, अब परफ़ॉर्मेंस पैनल का इस्तेमाल करें.
हम JavaScript प्रोफ़ाइलर को बंद क्यों कर रहे हैं? (JS प्रोफ़ाइलर)
Chrome 58 के बाद से, DevTools टीम ने JS प्रोफ़ाइलर को बंद करने की योजना बनाई है. इसकी कई वजहें हैं:
- इसे अब डेवलप नहीं किया जा रहा है. कई सालों में JS प्रोफ़ाइलर को कोई बड़ा अपडेट नहीं मिला है और टीम के पास उसे डेवलप करने के लिए संसाधन नहीं हैं.
- प्रोफ़ाइल बनाने का ज़्यादा बेहतर अनुभव. परफ़ॉर्मेंस पैनल का इस्तेमाल पहले से ही सभी तरह के परफ़ॉर्मेंस विश्लेषण के लिए किया जाता है. साथ ही, Node.js में JavaScript सीपीयू परफ़ॉर्मेंस की प्रोफ़ाइल बनाने की इस सुविधा की वजह से सभी चीज़ों को एक ही जगह इकट्ठा करना सही रहता है, ताकि एक जैसा अनुभव मिले और बेहतर तरीके से काम किया जा सके.
- परफ़ॉर्मेंस पैनल बेहतर है. हम इसमें लगातार नई सुविधाएं और सुधार जोड़ रहे हैं, ताकि परफ़ॉर्मेंस का विश्लेषण करने के लिए यह ज़्यादा बेहतर और इस्तेमाल में आसान टूल बन जाए.
बंद होने के बाद आपको क्या करना चाहिए?
JavaScript सीपीयू की परफ़ॉर्मेंस को प्रोफ़ाइल करने के तरीके के बारे में ज़्यादा जानने के लिए, प्रोफ़ाइल Node.js की परफ़ॉर्मेंस देखें.
परफ़ॉर्मेंस पैनल का इस्तेमाल करने के लिए यहां कुछ सलाह दी गई है:
- परफ़ॉर्मेंस रोकने वाली गड़बड़ियों की पहचान करने के लिए, फ़्लेम चार्ट का इस्तेमाल करें.
- फ़ंक्शन के बीच का संबंध समझने के लिए बॉटम-अप और कॉल ट्री टैब का इस्तेमाल करें.
हम बंद होने से कैसे निपटेंगे?
डेवलपर से सुझाव लेने के लिए, हमने एक प्रोटोटाइप बनाया और GitHub पर टिप्पणियों के लिए अनुरोध (आरएफ़सी) को सार्वजनिक तौर पर पब्लिश किया.
इसके अलावा, हम डेवलपर के विशेषज्ञों से संपर्क करके, प्रोटोटाइप की जांच करते हैं. इसमें किसी भी समस्या या समस्या को ठीक किया जाता है, ताकि यह पक्का किया जा सके कि परफ़ॉर्मेंस पैनल, प्रोफ़ाइल की मुख्य ज़रूरतों को पूरा करता हो.
हम धीरे-धीरे JS प्रोफ़ाइलर को चार स्टेज में बंद कर रहे हैं, ताकि डेवलपर को इसे अडजस्ट करने और अपनाने के लिए काफ़ी समय मिल सके.
अहम समस्याएं और उन्हें ठीक करने का तरीका
हमें जो सुझाव मिले उनमें सबसे ज़्यादा समस्याएं तीन मुख्य मुद्दों पर थीं:
- यह
.cpuprofileफ़ाइल फ़ॉर्मैट के साथ काम करता है. JS प्रोफ़ाइलर किसी दूसरे फ़ाइल फ़ॉर्मैट का इस्तेमाल करता है. यह परफ़ॉर्मेंस पैनल में दिखना चाहिए. - लोड होने की धीमी स्पीड. ऐसा लग रहा था कि पैनल के लोड होने की स्पीड धीमी थी, जिससे प्रोफ़ाइल बनाने की प्रोसेस में रुकावट आ रही थी.
- JavaScript वीएम सिलेक्टर मौजूद नहीं है. कुछ मामलों में, JavaScript वीएम इंस्टेंस सिलेक्टर की सीमित प्रोफ़ाइल बनाने की सुविधाएं न होने की वजह से.
आइए, हर समस्या पर नज़र डालते हैं और जानते हैं कि हमने इन्हें कैसे ठीक किया है.
लोड होने की धीमी स्पीड
डेवलपर ने हमें बताया कि परफ़ॉर्मेंस पैनल को बड़ी डेटा फ़ाइलें लोड करने में ज़्यादा समय लगा और कभी-कभी यह क्रैश भी हो जाता है.
हमने DevTools का विश्लेषण करने के लिए, DevTools का इस्तेमाल किया है. इसे "DevTools-on-DevTools" कहा जाता है. हमें समस्याएं मिलीं और हमने कई ऑप्टिमाइज़ेशन किए:
SetकोArrayडेटा स्ट्रक्चर से बदला गया.Mapके ग़ैर-ज़रूरी डेटा स्ट्रक्चर हटाए गए.- मेमोरी स्टैक के इस्तेमाल को कम करने के लिए, बार-बार होने वाले फ़ंक्शन को इटरेटिव (लूप के लिए) में बदला गया.
इन समस्याओं को ठीक करके, हमने बड़ी फ़ाइलों के लोड होने की प्रोसेस को 80% तेज़ कर दिया है! 🎉
इस ब्लॉग पोस्ट में हमने जो सीखा है, उसके बारे में ज़्यादा पढ़ें: परफ़-सेप्शन के ज़रिए 400% तेज़ परफ़ॉर्मेंस पैनल.
JavaScript वीएम सिलेक्टर मौजूद नहीं है
शुरुआती प्रोटोटाइप में JavaScript वीएम सिलेक्टर मौजूद नहीं था. डेवलपर इसका इस्तेमाल ड्रिल-डाउन करने के लिए करते हैं और किसी खास वीएम इंस्टेंस के विश्लेषण पर फ़ोकस करते हैं.
अब हमने परफ़ॉर्मेंस पैनल में JavaScript वीएम सिलेक्टर जोड़ा है. इसमें सभी उपलब्ध JavaScript वीएम इंस्टेंस की ड्रॉप-डाउन सूची दिखती है. किसी इंस्टेंस को चुनने पर, परफ़ॉर्मेंस पैनल उस खास इंस्टेंस के लिए सीपीयू प्रोफ़ाइल लोड करता है.
cpuprofile फ़ाइल फ़ॉर्मैट के साथ काम करता है
इससे पहले, परफ़ॉर्मेंस पैनल में सिर्फ़ ट्रेस फ़ाइलें काम करती थीं. ये ऐसी 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 Canary, Dev या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. झलक दिखाने वाले इन चैनलों की मदद से, DevTools की नई सुविधाओं को ऐक्सेस किया जा सकता है और वेब प्लैटफ़ॉर्म के बेहतरीन एपीआई की जांच की जा सकती है. साथ ही, उपयोगकर्ताओं से पहले ही अपनी साइट की समस्याओं का पता लगाया जा सकता है!
Chrome DevTools की टीम से संपर्क करना
पोस्ट में नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com के ज़रिए हमें कोई सुझाव या फ़ीडबैक सबमिट करें.
- ज़्यादा विकल्प
> का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें सहायता > DevTools में DevTools से जुड़ी समस्याओं की शिकायत करें. - @ChromeDevTools पर ट्वीट करें.
- DevTools YouTube वीडियो या DevTools के बारे में सलाह YouTube वीडियो में नया क्या है, इस पर टिप्पणी करें.