क्या मुझे तत्वों को हटाने से पहले ईवेंट श्रोताओं को हटाने की आवश्यकता है?

Question

यदि मेरे पास उन बच्चों के साथ मूल तत्व है जिनके पास ईवेंट श्रोताओं को बाध्य किया गया है, तो क्या मुझे माता-पिता को साफ़ करने से पहले उन ईवेंट श्रोताओं को हटाने की ज़रूरत है? (यानी, parent.innerHTML = '';) अगर घटना श्रोताओं को डीओएम से हटा दिया जाता है तो क्या ईवेंट श्रोताओं को तत्व से अनबाउंड नहीं किया जा सकता है?

Answer 1

लघु जवाब: हाँ

लांग जवाब: अधिकतर ब्राउज़र इस सही ढंग से संभाल और उन संचालकों खुद को हटा दें। कुछ पुराने ब्राउज़र हैं (आईई 6 और 7, अगर मुझे सही याद है) जो इसे गड़बड़ कर रहे हैं। हां, मेमोरी लीक हो सकती है। आपको इसके बारे में चिंता करने की ज़रूरत नहीं है, लेकिन आपको इसकी आवश्यकता है। this document पर एक नज़र डालें।

Answer 2

बस यहां जानकारी अपडेट करने के लिए। मैं विभिन्न ब्राउज़रों का परीक्षण कर रहा हूं, विशेष रूप से आईफ्रेम ऑनलोड घटनाओं पर गोलाकार रूप से निर्भर घटना श्रोताओं के लिए मेमोरी लीक के लिए।

इस्तेमाल किया (jsfiddle स्मृति परीक्षण के साथ हस्तक्षेप, तो यह परीक्षण करने के लिए अपने खुद के सर्वर का उपयोग) कोड:

<div> 
    <label> 
     <input id="eventListenerCheckbox" type="checkbox" /> Clear event listener when removing iframe 
    </label> 
    <div> 
     <button id="startTestButton">Start Test</button> 
    </div> 
</div> 

<div> 
    <pre id="console"></pre> 
</div> 

<script> 

    (function() { 
     var consoleElement = document.getElementById('console'); 
     window.log = function(text) { 
      consoleElement.innerHTML = consoleElement.innerHTML + '<br>' + text; 
     }; 
    }()); 

    (function() { 
     function attachEvent(element, eventName, callback) { 
      if (element.attachEvent) 
      { 
       element.attachEvent(eventName, callback); 
      } 
      else 
      { 
       element[eventName] = callback; 
      } 
     } 

     function detachEvent(element, eventName, callback) { 
      if (element.detachEvent) 
      { 
       element.detachEvent(eventName, callback); 
      } 
      else 
      { 
       element[eventName] = null; 
      } 
     } 

     var eventListenerCheckbox = document.getElementById('eventListenerCheckbox'); 
     var startTestButton = document.getElementById('startTestButton'); 
     var iframe; 
     var generatedOnLoadEvent; 

     function createOnLoadFunction(iframe) { 
      var obj = { 
       increment: 0, 
       hugeMemory: new Array(100000).join('0') + (new Date().getTime()), 
       circularReference: iframe 
      }; 

      return function() { 
       // window.log('iframe onload called'); 
       obj.increment += 1; 
       destroy(); 
      }; 
     } 

     function create() { 
      // window.log('create called'); 
      iframe = document.createElement('iframe'); 

      generatedOnLoadEvent = createOnLoadFunction(iframe); 
      attachEvent(iframe, 'onload', generatedOnLoadEvent); 

      document.body.appendChild(iframe); 
     } 

     function destroy() { 
      // window.log('destroy called'); 
      if (eventListenerCheckbox.checked) 
      { 
       detachEvent(iframe, 'onload', generatedOnLoadEvent) 
      } 

      document.body.removeChild(iframe); 
      iframe = null; 
      generatedOnLoadEvent = null; 
     } 

     function startTest() { 
      var interval = setInterval(function() { 
       create(); 
      }, 100); 

      setTimeout(function() { 
       clearInterval(interval); 
       window.log('test complete'); 
      }, 10000); 
     } 

     attachEvent(startTestButton, 'onclick', startTest); 
    }()); 

</script> 

अगर कोई स्मृति रिसाव है, इस्तेमाल किया स्मृति के बाद 1000kb या उससे कम के आसपास में वृद्धि हो जाएगी परीक्षण चलाए जाते हैं। हालांकि, अगर स्मृति रिसाव है, तो स्मृति में लगभग 16,000kb की वृद्धि होगी। ईवेंट श्रोता को हटाने से पहले हमेशा कम स्मृति उपयोग (कोई रिसाव) में परिणाम नहीं होता है।

परिणाम:

• IE6 - स्मृति रिसाव
• IE7 - स्मृति रिसाव
• IE8 - कोई स्मृति रिसाव
• IE9 - स्मृति रिसाव (???)
• IE10 - स्मृति रिसाव (???)
• आईई 11 - कोई मेमोरी लीक
• एज (20) - कोई मेमोरी लीक
• क्रोम (50) - कोई मेमोरी लीक
• फ़ायरफ़ॉक्स (46) - कहना मुश्किल है, बुरी तरह से रिसाव नहीं करता है, तो हो सकता है कि केवल अक्षम कचरा कलेक्टर? किसी स्पष्ट कारण के लिए अतिरिक्त 4 एमबी के साथ समाप्त होता है। रक्त स्राव बढ़त अनुप्रयोगों शायद घटना श्रोताओं नहीं हटाने के साथ भाग प्राप्त कर सकते हैं:
• ओपेरा (36) - कोई स्मृति रिसाव

निष्कर्ष - कोई स्मृति

सफारी (9) रिसाव। लेकिन परेशान होने के बावजूद मैं अभी भी इसे अच्छा अभ्यास मानता हूं।