Chrome और DevTools का इस्तेमाल करके, मेमोरी से जुड़ी उन समस्याओं का पता लगाने का तरीका जानें जिनसे पेज की परफ़ॉर्मेंस पर असर पड़ता है. इनमें ये समस्याएं भी शामिल हैं मेमोरी लीक होना, मेमोरी का तेज़ी से लोड होना, और बार-बार कचरा इकट्ठा होना.
खास जानकारी
- Chrome टास्क मैनेजर की मदद से पता लगाएं कि आपका पेज फ़िलहाल कितनी मेमोरी का इस्तेमाल कर रहा है.
- टाइमलाइन की रिकॉर्डिंग की मदद से, यह विज़ुअलाइज़ करें कि समय के साथ-साथ मेमोरी के इस्तेमाल की कितनी संभावना है.
- हीप स्नैपशॉट की मदद से, डिटैच किए गए डीओएम ट्री की पहचान करें. यह मेमोरी लीक होने की आम वजह है.
- ऐलोकेशन टाइमलाइन रिकॉर्डिंग की मदद से पता लगाएं कि आपके JS हीप में नई मेमोरी कब असाइन की जा रही है.
खास जानकारी
RAIL परफ़ॉर्मेंस मॉडल के हिसाब से, आपकी परफ़ॉर्मेंस का फ़ोकस इस पर होना चाहिए आपके उपयोगकर्ता.
मेमोरी से जुड़ी समस्याएं अहम होती हैं, क्योंकि आम तौर पर लोग इन्हें आसानी से देख सकते हैं. उपयोगकर्ता मेमोरी को समझ सकते हैं समस्याओं को हल करते हैं, तो:
- किसी पेज की परफ़ॉर्मेंस, समय के साथ धीरे-धीरे खराब होती जाती है. संभवतः यह समस्या का एक लक्षण है मेमोरी लीक. मेमोरी लीक तब होती है, जब पेज में किसी गड़बड़ी की वजह से, पेज धीरे-धीरे ज़्यादा और ज़्यादा इस्तेमाल करता है समय के साथ ज़्यादा मेमोरी की सुविधा मिलती है.
- किसी पेज की परफ़ॉर्मेंस लगातार खराब रहती है. हो सकता है कि यह मेमोरी ब्लोट का एक लक्षण हो. डिवाइस की मेमोरी ब्लोट तब होता है, जब कोई पेज, पेज स्पीड को बढ़ाने के लिए ज़रूरी मेमोरी से ज़्यादा मेमोरी का इस्तेमाल करता है.
- किसी पेज की परफ़ॉर्मेंस में देरी हो रही है या वह बार-बार रुक जाता है. शायद यह इसका एक लक्षण है अक्सर कचरा इकट्ठा किया जाता है. ग़ैर-ज़रूरी डेटा तब इकट्ठा किया जाता है, जब ब्राउज़र फिर से मेमोरी पर दावा करता है. ब्राउज़र तय करती है कि ऐसा कब होगा. कलेक्शन के दौरान, सभी स्क्रिप्ट रोक दी जाती हैं. इसलिए अगर ब्राउज़र बहुत सारी चीज़ें कचरा पैदा करने वाली हैं, लेकिन स्क्रिप्ट को एक्ज़ीक्यूशन करने से बहुत रोका जा सकता है.
मेमोरी ब्लोट: "बहुत ज़्यादा" कितना हो गया है?
मेमोरी लीक को पहचानना आसान होता है. अगर कोई साइट लगातार ज़्यादा से ज़्यादा मेमोरी का इस्तेमाल कर रही है, तो इसका मतलब है कि लीक हो गया. हालांकि, याददाश्त खोना ज़्यादा मुश्किल हो जाता है. "बहुत ज़्यादा मेमोरी इस्तेमाल करना" किसे माना जाता है?
यहां कोई आंकड़ा नहीं है, क्योंकि अलग-अलग डिवाइस और ब्राउज़र की क्षमताएं अलग-अलग होती हैं. किसी महंगे स्मार्टफ़ोन पर आसानी से चलने वाला पेज, कम क्वालिटी वाले स्मार्टफ़ोन में क्रैश हो सकता है.
RAIL मॉडल का इस्तेमाल करना और अपने उपयोगकर्ताओं पर फ़ोकस करना सबसे अहम है. जानें कि कौनसे डिवाइस लोकप्रिय हैं उपयोगकर्ताओं से कनेक्ट किया है और फिर उन डिवाइस पर अपने पेज की जाँच की है. अगर अनुभव लगातार बना रहा हो, तो खराब है, तो हो सकता है कि पेज उन डिवाइसों की मेमोरी क्षमता को पार कर रहा हो.
Chrome टास्क मैनेजर की मदद से, रीयल टाइम में मेमोरी के इस्तेमाल पर नज़र रखें
Chrome टास्क मैनेजर का इस्तेमाल, मेमोरी से जुड़ी समस्या की जांच करने के लिए करें. टास्क मैनेजर एक रीयलटाइम मॉनिटर है, जिससे आपको पता चलता है कि कोई पेज फ़िलहाल कितनी मेमोरी का इस्तेमाल कर रहा है.
Shift+Esc दबाएं या Chrome के मुख्य मेनू पर जाएं और More Tools चुनें > टास्क मैनेजर से टास्क मैनेजर खोलें.
टास्क मैनेजर के टेबल हेडर पर राइट क्लिक करें और JavaScript मेमोरी चालू करें.
ये दो कॉलम आपको इस बारे में अलग-अलग बातें बताते हैं कि आपका पेज मेमोरी का इस्तेमाल कैसे कर रहा है:
- मेमोरी कॉलम, नेटिव मेमोरी को दिखाता है. डीओएम नोड, नेटिव मेमोरी में सेव किए जाते हैं. अगर यह वैल्यू बढ़ रही है, डीओएम नोड बनाए जा रहे हैं.
- JavaScript मेमोरी कॉलम, JS हीप को दिखाता है. इस कॉलम में दो वैल्यू हैं. कॉन्टेंट बनाने आपकी रुचि लाइव नंबर (ब्रैकेट में दी गई संख्या) है. लाइव नंबर यह बताता है कि आपके पेज पर मौजूद ऐक्सेस किए जा सकने वाले ऑब्जेक्ट कितनी मेमोरी का इस्तेमाल कर रहे हैं. अगर यह संख्या या तो नए ऑब्जेक्ट बन रहे हैं या मौजूदा ऑब्जेक्ट बढ़ रहे हैं.
परफ़ॉर्मेंस रिकॉर्डिंग की मदद से, मेमोरी की लीक हुए डेटा को विज़ुअलाइज़ करना
जांच शुरू करने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल भी किया जा सकता है. द परफ़ॉर्मेंस पैनल की मदद से, समय के साथ पेज की मेमोरी के इस्तेमाल को विज़ुअलाइज़ करने में मदद मिलती है.
- DevTools पर परफ़ॉर्मेंस पैनल खोलें.
- मेमोरी चेकबॉक्स को चालू करें.
- रिकॉर्डिंग करें.
परफ़ॉर्मेंस की मेमोरी की रिकॉर्डिंग दिखाने के लिए, नीचे दिए गए कोड का इस्तेमाल करें:
var x = [];
function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement('div'));
}
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
जब भी कोड में बताए गए बटन को दबाया जाता है, तब दस हज़ार div नोड जुड़ जाते हैं
और दस लाख x वर्णों की स्ट्रिंग को x कलेक्शन में पुश किया जाता है.
इस कोड को चलाने से, टाइमलाइन की रिकॉर्डिंग अपने-आप बनती है. इस रिकॉर्डिंग का स्क्रीनशॉट, नीचे दिया गया है:
सबसे पहले, यूज़र इंटरफ़ेस की जानकारी. HEAP पैनल में HEAP ग्राफ़ (नीचे NET) JS हीप को दिखाता है. खास जानकारी पैनल के नीचे, काउंटर पैनल होता है. यहां ये काम किए जा सकते हैं JS हीप के हिसाब से, मेमोरी के इस्तेमाल का ब्यौरा देखें (HEAP पैनल में मौजूद HEAP ग्राफ़ की तरह), दस्तावेज़, DOM नोड, लिसनर, और जीपीयू मेमोरी. चेकबॉक्स को बंद करने से वह ग्राफ़ से छिप जाता है.
अब, स्क्रीनशॉट के साथ कोड का विश्लेषण. अगर आप नोड काउंटर (
हरा ग्राफ़) आप देख सकते हैं कि यह कोड के साथ पूरी तरह से मेल खाता है. नोड की संख्या इतनी बढ़ जाती है
अलग-अलग चरण. यह मान लिया जा सकता है कि नोड की संख्या में होने वाली हर बढ़ोतरी grow() का कॉल है. JS
हीप ग्राफ़ (नीला ग्राफ़) उतना आसान नहीं है. सबसे सही तरीकों को ध्यान में रखते हुए, पहली गिरावट
असल में, कचरा इकट्ठा करने की सुविधा है. इसे कचरा इकट्ठा करने बटन को दबाकर पूरा किया जाता है. जैसे
रिकॉर्डिंग आगे बढ़ती है, तो आपको JS के हीप साइज़ में बढ़ोतरी दिख सकती है. यह स्वाभाविक और अपेक्षित है:
JavaScript कोड हर बटन पर क्लिक करने पर DOM नोड बना रहा है और इसके ज़रिए बहुत से काम कर रहा है
10 लाख वर्णों की स्ट्रिंग बनाता है. सबसे अहम बात यह है कि JS हीप खत्म हो जाता है
उससे ज़्यादा है (यहां "शुरुआत" की शुरुआत से ही कचरा इकट्ठा करने की कोशिश की जा रही है). तय सीमा में
असली दुनिया में, अगर आपको JS हीप साइज़ या नोड साइज़ को बढ़ाने का यह पैटर्न दिखता है, तो यह
मेमोरी लीक हो सकती है.
हीप स्नैपशॉट की मदद से, डिटैच किए गए डीओएम ट्री की मेमोरी की जानकारी पाएं
डीओएम नोड सिर्फ़ तब इकट्ठा किया जा सकता है, जब पेज के डीओएम ट्री या JavaScript कोड. नोड को "अलग किया गया" कहा जाता है जब इसे डीओएम ट्री से हटाया जाता है, लेकिन कुछ JavaScript अब भी इसका रेफ़रंस देते हैं. अलग किए गए डीओएम नोड, मेमोरी लीक होने की आम वजह हैं. यह सेक्शन में, DevTools को इस्तेमाल करने का तरीका बताया गया है अलग किए गए नोड की पहचान करने के लिए हीप प्रोफ़ाइलर का इस्तेमाल करें.
यहां डिटैच किए गए DOM नोड का एक उदाहरण दिया गया है.
var detachedTree;
function create() {
var ul = document.createElement('ul');
for (var i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
detachedTree = ul;
}
document.getElementById('create').addEventListener('click', create);
कोड में बताए गए बटन पर क्लिक करने से, 10 li चाइल्ड वाला ul नोड बन जाता है. ये नोड
कोड से रेफ़र किया गया हो, लेकिन वह डीओएम ट्री में मौजूद न हो. इसलिए, वह डिटैच किया गया है.
हीप स्नैपशॉट, डिटैच किए गए नोड की पहचान करने का एक तरीका है. जैसा कि इसके नाम से ही पता चलता है, हीप स्नैपशॉट में आपको किस प्रकार से आपके पेज के JS ऑब्जेक्ट और DOM नोड के बीच स्नैपशॉट.
स्नैपशॉट बनाने के लिए, DevTools खोलें और मेमोरी पैनल पर जाएं. इसके बाद, हीप स्नैपशॉट लें रेडियो बटन और फिर स्नैपशॉट लें बटन दबाएं.
स्नैपशॉट को प्रोसेस होने और लोड होने में कुछ समय लग सकता है. काम पूरा हो जाने पर, इसे बाईं ओर से चुनें पैनल (जिसका नाम HEAN SNAPSHOTS रखा गया है).
डिटैच किए गए डीओएम ट्री खोजने के लिए, क्लास फ़िल्टर टेक्स्ट बॉक्स में Detached टाइप करें.
अलग किए गए पेड़ की जांच करने के लिए कैरेट को बड़ा करें.
पीले रंग से हाइलाइट किए गए नोड, JavaScript कोड से सीधे तौर पर जुड़े होते हैं. नोड हाइलाइट किए गए लाल के प्रत्यक्ष संदर्भ नहीं हैं. वे केवल जीवित होते हैं, क्योंकि वे पीले नोड का हिस्सा होते हैं पेड़ आम तौर पर, आपको पीले रंग के नोड पर फ़ोकस करना है. अपना कोड ठीक करें, ताकि पीला नोड कहीं की आवश्यकता से ज़्यादा समय तक ज़िंदा रह सकता है, और आपको उन लाल नोड से भी छुटकारा मिल जाता है जो इसका हिस्सा हैं पीले नोड का ट्री.
किसी पीले नोड पर क्लिक करके उसकी और जांच करनी चाहिए. ऑब्जेक्ट पैनल में, ज़्यादा जानकारी दिखती है
जोड़ दें. उदाहरण के लिए, नीचे दिए गए स्क्रीनशॉट में
यह कि detachedTree वैरिएबल नोड का संदर्भ दे रहा है. इस मेमोरी लीक को ठीक करने के लिए,
detachedTree का इस्तेमाल करने वाले कोड का अध्ययन करेगा और पक्का करेगा कि यह नोड के रेफ़रंस को हटा दे
जब इसकी ज़रूरत न हो.
ऐलोकेशन टाइमलाइन की मदद से JS हीप मेमोरी लीक की पहचान करें
ऐलोकेशन टाइमलाइन एक और टूल है जिससे आपको अपने JS हीप में, मेमोरी लीक को ट्रैक करने में मदद मिल सकती है.
आवंटन टाइमलाइन दिखाने के लिए, नीचे दिए गए कोड का इस्तेमाल करें:
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
जब भी कोड में बताए गए बटन को पुश किया जाता है, तो दस लाख वर्णों की स्ट्रिंग को
x कलेक्शन में जोड़ा गया.
आवंटन की टाइमलाइन रिकॉर्ड करने के लिए, DevTools खोलें. इसके बाद, प्रोफ़ाइल पैनल पर जाएं और रिकॉर्ड करें
ऐलोकेशन टाइमलाइन रेडियो बटन, शुरू करें बटन दबाएं, अपने हिसाब से कार्रवाई करें
इससे मेमोरी लीक हो रही है और फिर रिकॉर्डिंग बंद करें बटन दबाएं
(
) जब
आपका काम हो गया.
रिकॉर्ड करते समय ध्यान दें कि क्या ऐलोकेशन टाइमलाइन पर नीले रंग के बार दिखते हैं, जैसे कि स्क्रीनशॉट देखें.
ये नीले बार, नई मेमोरी दिखाते हैं. अब आपके पास, ऐसी नई मेमोरी का इस्तेमाल करने वाले लोगों को शामिल करने का मौका है आज़माएं. कंस्ट्रक्टर पैनल को फ़िल्टर करने के लिए, किसी बार पर ज़ूम करके सिर्फ़ वे ऑब्जेक्ट दिखाए जा सकते हैं जो तय समयावधि के दौरान बांटे गए थे.
ऑब्जेक्ट को बड़ा करें और ऑब्जेक्ट पैनल में उसके बारे में ज़्यादा जानकारी देखने के लिए, उसकी वैल्यू पर क्लिक करें. इसके लिए
उदाहरण के लिए, नीचे दिए गए स्क्रीनशॉट में, नए असाइन किए गए ऑब्जेक्ट की जानकारी देखें.
आप देख सकेंगे कि उसे Window स्कोप में x वैरिएबल के लिए असाइन किया गया है.
फ़ंक्शन के हिसाब से, मेमोरी के बंटवारे की जांच करें
JavaScript फ़ंक्शन के हिसाब से मेमोरी का बंटवारा देखने के लिए, मेमोरी पैनल में ऐलोकेशन सैंपलिंग टाइप का इस्तेमाल करें.
- ऐलोकेशन सैंपलिंग रेडियो बटन चुनें. अगर पेज पर कोई कर्मचारी है, तो शुरू करें बटन के बगल में मौजूद ड्रॉपडाउन मेन्यू का इस्तेमाल करके, इसे प्रोफ़ाइलिंग टारगेट के तौर पर चुना जा सकता है.
- शुरू करें बटन दबाएं.
- आपको जिस पेज की जांच करनी है उस पर कार्रवाइयां करें.
- अपनी सभी कार्रवाइयां पूरी करने के बाद, बंद करें बटन दबाएं.
DevTools आपको फ़ंक्शन के हिसाब से मेमोरी के बंटवारे का ब्रेकडाउन दिखाता है. डिफ़ॉल्ट व्यू ज़्यादा (सबसे नीचे) होता है अप), जो सबसे ऊपर सबसे ज़्यादा मेमोरी असाइन करने वाले फ़ंक्शन दिखाता है.
अक्सर इकट्ठा किया जाने वाला कचरा देखें
अगर आपका पेज बार-बार रुकता है, तो इसका मतलब है कि आपको कूड़ा इकट्ठा करने से जुड़ी समस्याएं हो सकती हैं.
बार-बार आने वाले कचरे को पहचानने के लिए, Chrome टास्क मैनेजर या टाइमलाइन की मेमोरी रिकॉर्डिंग का इस्तेमाल किया जा सकता है संग्रह. टास्क मैनेजर में, बार-बार बढ़ती और कम होती मेमोरी या JavaScript मेमोरी वैल्यू, बार-बार कचरा इकट्ठा करने के बारे में बताती हैं. टाइमलाइन की रिकॉर्डिंग में, लगातार बढ़ते और घटते क्रम में JS हीप या नोड काउंट ग्राफ़, अक्सर गै़रबेज कलेक्शन को दिखाता है.
समस्या की पहचान कर लेने के बाद, यह जानने के लिए कि कहां मेमोरी का बंटवारा किया जा रहा है और किन फ़ंक्शन की वजह से बंटवारा हो रहा है.