पेज की परफ़ॉर्मेंस पर असर डालने वाली मेमोरी से जुड़ी समस्याओं का पता लगाने के लिए, Chrome और DevTools का इस्तेमाल करने का तरीका जानें. इन समस्याओं में, मेमोरी लीक होना, मेमोरी ब्लोट, और बार-बार गार्बेज इकट्ठा करना शामिल है.
खास जानकारी
- Chrome टास्क मैनेजर की मदद से पता लगाएं कि आपका पेज फ़िलहाल कितनी मेमोरी का इस्तेमाल कर रहा है.
- टाइमलाइन की रिकॉर्डिंग की मदद से, यह विज़ुअलाइज़ करें कि समय के साथ-साथ मेमोरी के इस्तेमाल की कितनी संभावना है.
- हीप स्नैपशॉट की मदद से, डिटैच किए गए डीओएम ट्री की पहचान करें. यह मेमोरी लीक होने की आम वजह है.
- ऐलोकेशन टाइमलाइन रिकॉर्डिंग की मदद से पता लगाएं कि आपके JS हीप में नई मेमोरी कब असाइन की जा रही है.
खास जानकारी
RAIL परफ़ॉर्मेंस मॉडल के हिसाब से, आपकी परफ़ॉर्मेंस पर फ़ोकस आपके उपयोगकर्ता होने चाहिए.
मेमोरी से जुड़ी समस्याएं अहम होती हैं, क्योंकि आम तौर पर लोग इन्हें आसानी से देख सकते हैं. उपयोगकर्ता इन तरीकों से मेमोरी से जुड़ी समस्याओं को समझ सकते हैं:
- किसी पेज की परफ़ॉर्मेंस, समय के साथ धीरे-धीरे खराब होती जाती है. शायद यह मेमोरी लीक का एक लक्षण है. मेमोरी लीक तब होती है, जब पेज में किसी गड़बड़ी की वजह से, पेज समय के साथ ज़्यादा ज़्यादा मेमोरी का इस्तेमाल करने लगता है.
- किसी पेज की परफ़ॉर्मेंस लगातार खराब रहती है. हो सकता है कि यह मेमोरी ब्लोट का एक लक्षण हो. मेमोरी ब्लोट तब होती है, जब कोई पेज, पेज स्पीड को बेहतर बनाने के लिए ज़रूरी मेमोरी से ज़्यादा मेमोरी का इस्तेमाल करता है.
- किसी पेज की परफ़ॉर्मेंस में देरी हो रही है या वह बार-बार रुक जाता है. शायद यह कचरे का बार-बार इकट्ठा होने का एक लक्षण है. ग़ैर-ज़रूरी डेटा तब इकट्ठा किया जाता है, जब ब्राउज़र फिर से मेमोरी पर दावा करता है. ऐसा होने पर, ब्राउज़र फ़ैसला लेता है. कलेक्शन के दौरान, सभी स्क्रिप्ट रोक दी जाती हैं. इसलिए अगर ब्राउज़र बहुत सारी गंदगी इकट्ठा कर रहा है, तो स्क्रिप्ट चलाने की प्रोसेस रुक जाएगी.
मेमोरी ब्लोट: "बहुत ज़्यादा" कितना हो गया है?
मेमोरी लीक को पहचानना आसान होता है. अगर कोई साइट लगातार ज़्यादा से ज़्यादा मेमोरी का इस्तेमाल कर रही है, तो इसका मतलब है कि वह साइट लीक हो गई है. हालांकि, याददाश्त खोना ज़्यादा मुश्किल हो जाता है. "बहुत ज़्यादा मेमोरी इस्तेमाल करना" किसे माना जाता है?
यहां कोई आंकड़ा नहीं है, क्योंकि अलग-अलग डिवाइस और ब्राउज़र की क्षमताएं अलग-अलग होती हैं. किसी महंगे स्मार्टफ़ोन पर आसानी से चलने वाला पेज, कम क्वालिटी वाले स्मार्टफ़ोन में क्रैश हो सकता है.
RAIL मॉडल का इस्तेमाल करना और अपने उपयोगकर्ताओं पर फ़ोकस करना सबसे अहम है. पता करें कि आपके उपयोगकर्ताओं के बीच कौनसे डिवाइस लोकप्रिय हैं और फिर उन डिवाइस पर अपना पेज देखें. अगर आपको लगातार खराब अनुभव मिलता है, तो हो सकता है कि पेज की मेमोरी क्षमता से ज़्यादा हो.
Chrome टास्क मैनेजर की मदद से, रीयल टाइम में मेमोरी के इस्तेमाल पर नज़र रखें
Chrome टास्क मैनेजर का इस्तेमाल, मेमोरी से जुड़ी समस्या की जांच करने के लिए करें. टास्क मैनेजर एक रीयलटाइम मॉनिटर है, जिससे आपको पता चलता है कि किसी पेज पर फ़िलहाल कितनी मेमोरी का इस्तेमाल हो रहा है.
टास्क मैनेजर खोलने के लिए, Shift+Esc दबाएं या Chrome के मुख्य मेन्यू पर जाएं और ज़्यादा टूल > टास्क मैनेजर को चुनें.
टास्क मैनेजर के टेबल हेडर पर राइट क्लिक करें और 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 के कलेक्शन में पुश किया जाता है.
इस कोड को चलाने से, टाइमलाइन की रिकॉर्डिंग अपने-आप बनती है. इस रिकॉर्डिंग का स्क्रीनशॉट, नीचे दिया गया है:
सबसे पहले, यूज़र इंटरफ़ेस की जानकारी. खास जानकारी पैनल (नेट के नीचे) में मौजूद एचईएपी ग्राफ़, JS हीप को दिखाता है. खास जानकारी पैनल के नीचे, काउंटर पैनल होता है. यहां पर, JS हीप (खास जानकारी पैनल में HEAN ग्राफ़ की तरह), दस्तावेज़, DOM नोड, लिसनर, और जीपीयू मेमोरी के हिसाब से, मेमोरी के इस्तेमाल की जानकारी देखी जा सकती है. चेकबॉक्स को बंद करने से वह ग्राफ़ से छिप जाता है.
अब, स्क्रीनशॉट के साथ कोड का विश्लेषण. नोड काउंटर (हरा ग्राफ़) को देखने पर आपको दिखेगा कि यह कोड से पूरी तरह मेल खाता है. अलग-अलग चरणों में नोड की संख्या
बढ़ती है. यह मान लिया जा सकता है कि नोड की संख्या में होने वाली हर बढ़ोतरी grow() का कॉल है. JS हीप ग्राफ़ (नीला ग्राफ़) उतना आसान नहीं है. सबसे सही तरीकों के मुताबिक, पहली बार ऐप्लिकेशन में ही
कचरा इकट्ठा करने की शुरुआत की जाती है. ऐसा कचरा इकट्ठा करने बटन को दबाकर करने पर किया जाता है. जैसे-जैसे रिकॉर्डिंग आगे बढ़ती है, आपको दिखेगा कि JS के हीप साइज़ में बढ़ोतरी होती है. यह स्वाभाविक और अपेक्षित है: JavaScript कोड हर बटन क्लिक पर DOM नोड बना रहा है और दस लाख वर्णों की स्ट्रिंग बनाते समय बहुत सारा काम कर रहा है. सबसे अहम बात यह है कि 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 की मेमोरी की बार-बार बढ़ने वाली और कम होने वाली वैल्यू, गै़रबेज इकट्ठा करने के बारे में बताती हैं. टाइमलाइन रिकॉर्डिंग में, अक्सर उगते और गिरते जीएस हीप या नोड काउंट ग्राफ़, गै़रबिज़ कलेक्शन के बारे में बताते हैं.
समस्या की पहचान करने के बाद, ऐलोकेशन टाइमलाइन रिकॉर्डिंग का इस्तेमाल करके यह पता लगाया जा सकता है कि मेमोरी कहां बांटी जा रही है और किन फ़ंक्शन की वजह से बंटवारा हो रहा है.