🔷 👔 😈 IE8 में मेमोरी लीक, या एक सुखद अंत के साथ एक डरावनी परी कथा 👦🏿 🧜🏻 👩‍👩‍👧‍👦

आप लंबे समय से वेब एप्लिकेशन लिख रहे हैं, क्या आप पहले से ही सब कुछ देख चुके हैं और किसी और चीज से डरते नहीं हैं? फिर प्रकाश बंद करें और करीब बैठें, मैं आपको रात के लिए एक परी कथा बताना चाहता हूं।

एक बार एक बड़े-बड़े शहर में, एक बड़ी-बड़ी आईटी कंपनी में, उन्होंने एक बहुत बड़े ब्राउज़र में एक बड़े-बड़े प्रोजेक्ट का परीक्षण किया। और उन्होंने वहां मेमोरी लीक्स की खोज की। बड़ा, बड़ा। रिलीज से ठीक पहले।

और यह आश्चर्यजनक नहीं होगा अगर डेवलपर्स पूरी तरह से बेवकूफ थे। लेकिन नहीं, डेवलपर्स को दिल से पता था "इंटरनेट एक्सप्लोरर लीक पैटर्न को समझना और हल करना । " परिपत्र लिंक टूट गए थे, कोई बंद नहीं किया गया था, घटनाओं को उचित सम्मान के साथ व्यवहार किया गया था और हैंडलर उन्हें हटाना नहीं भूलते थे। हां, यह सिर्फ लीक से नहीं बचा।

डिस्क्लेमर: नीचे बताई गई सभी इकाइयाँ, घटनाएँ और कोड स्निपेट काल्पनिक हैं। सभी मैच रैंडम हैं।

अच्छा, क्या हुआ? एक बार फिर, वे अपने घटकों को कंघी करने के लिए बैठ गए और देखें कि क्या वे कुछ चूक गए हैं, विभिन्न कार्यक्रमों को चलाने के लिए शुरू किया, और Google के उत्तर की कोशिश करने की कोशिश की। लेकिन कार्यक्रमों ने मदद नहीं की, और बुद्धिमान गोगोल चुप थे। मुझे अपनी आस्तीन ऊपर चढ़ानी पड़ी और लाइन में लग कर देखना पड़ा कि संक्रमण कहाँ से हुआ। और एक दुर्भावनापूर्ण रेखा पाई गई, और यह कुछ इस तरह दिखी:

var cell = tableEl.firstChild.rows[0].cells[0];

और डेवलपर्स एक नुकसान में थे, उन्हें समस्या का अध्ययन करना और इसे हल करना था। जिसके साथ वे कामयाब रहे।

और फिर परी कथा समाप्त होती है और समस्या को प्रदर्शित करने वाला कोड शुरू होता है:

<!DOCTYPE HTML>
<html>
<body>
<span id="count">0</span> \<input id="num" value="1000" /\>
<input type="button" value="GO!" onclick="execute()" />
<hr />
<div id="test"></div>
</body>

<script type="text/javascript">
var count = 0;
function execute()
{
var val = document.getElementById('num').value;
for (var i = 0; i < val; i++)
{
var domEl = document.getElementById('test');
domEl.innerHTML = '<table><tbody><tr><td>A1</td></tr><tr><td>B1</td></tr></tbody></table>';
domEl.firstChild.insertRow(0);
domEl.removeChild(domEl.firstChild);
count++;
}
document.getElementById('count').innerHTML = count;
};
</script>
</html>

हम प्रक्रिया एक्सप्लोरर शुरू करते हैं और कई बार हम "गो!" दबाते हैं - दबाने से 10 मेगाबाइट पर चलता है:

रिसाव लाइन में छिपा है domEl.firstChild.rows[0] जैसा कि आप बस इसे domEl.firstChild.rows[0] करके देख सकते हैं। इसके अलावा, बग केवल IE8 मानक मोड में दिखाई देता है, IE7 और IE8 Quirks मोड इस बीमारी से प्रभावित नहीं हैं।

DomEl.firstChild.firstChild या getElementById को बदलने से रिसाव को खत्म करने में मदद मिलती है, लेकिन अगर परियोजना में ऐसी सैकड़ों लाइनें हैं? शायद कम समय लेने वाला विकल्प है?

आइए यह जानने की कोशिश करें कि Microsoft के भारतीय इस प्रभाव को कैसे प्राप्त करने में कामयाब रहे। जाहिर है, स्तंभों और कोशिकाओं के संग्रह केवल उपयोग किए जाने पर बनाए जाते हैं, समाधान काफी मजबूत है। और जब दस्तावेज़ दस्तावेज़ के DOM से तालिका को अलग किया जाता है, तो वे नष्ट नहीं होते हैं - यह भी काफी समझ और उचित है। केवल यहीं कचरा संग्रहकर्ता किसी कारण से परिपत्र लिंक को ध्यान में रखना भूल गया।
परिकल्पना की जाँच की जा सकती है। यदि यह संग्रह बनाने के बारे में है, तो अन्य मामलों में लीक होंगे जब सूचकांक का उपयोग किया जाता है। आवेषण के साथ पंक्तियों को बदलें [0]। बिंगो! रिसाव को संरक्षित किया गया था।

अब संघर्ष का तरीका स्पष्ट है। चूंकि DOM तत्वों TBODY और TD के बीच चक्रीय लिंक जगह में हैं, तो आपको बस TBODY के सभी वंशज को हटाने की आवश्यकता है:

while(domEl.firstChild.firstChild) {
while(domEl.firstChild.firstChild.firstChild)
domEl.firstChild.firstChild.removeChild(domEl.firstChild.firstChild.firstChild);
domEl.firstChild.removeChild(domEl.firstChild.firstChild);
}

यह काम किया है, लेकिन यह अभी भी खुशी के लिए पर्याप्त नहीं है, घटक को अलग से तालिका को सही ढंग से हटाने का ख्याल रखना बल्कि बल्कि बहुत कम है, और थोड़ी देर के लिए कुछ भूलना। आप निश्चित रूप से, प्रक्रिया को स्वचालित कर सकते हैं, getElementsByTag ('TABLE') जैसी किसी चीज़ का उपयोग कर सकते हैं ... लेकिन यह आवश्यक नहीं है, क्योंकि एक जादुई संपत्ति है भीतर का HTML जो हमारे लिए सब कुछ करेगा:

domEl.removeChild(domEl.firstChild) को domEl.innerHTML = '' बदलें
हम जांच करते हैं। यह काम करता है।

संक्षेप में:

इस प्रकार के रिसाव को प्रलेखित नहीं किया गया है, यह केवल IE8 मानक मोड में होता है जब रो या इंडेक्स इंडेक्स का उपयोग करते हुए DOM टेबल ऑब्जेक्ट्स के तरीकों और गुणों का उपयोग किया जाता है। (.rows [], .cells [], सम्मिलित करें (), आदि)

सबसे अच्छा समाधान इन विधियों और गुणों का उपयोग नहीं करना है।

एक विकल्प यह सुनिश्चित करना है कि तालिका में सभी पंक्तियों के DOM तत्वों को उनके पूर्वजों से काट दिया गया है, या सरलतम विकल्प का उपयोग करें: innerHTML = ''

IE8 में मेमोरी लीक, या एक सुखद अंत के साथ एक डरावनी परी कथा

संक्षेप में:

More articles: