이벤트 리스너가 바인딩 된 자식이있는 부모 요소가있는 경우 부모를 지우기 전에 해당 이벤트 리스너를 제거해야합니까? (즉, parent.innerHTML = '';) 이벤트 리스너가 DOM에서 제거 된 경우 요소에서 바인딩 해제되지 않으면 메모리 누수가 발생할 수 있습니까?
이벤트 리스너가 바인딩 된 자식이있는 부모 요소가있는 경우 부모를 지우기 전에 해당 이벤트 리스너를 제거해야합니까? (즉, parent.innerHTML = '';) 이벤트 리스너가 DOM에서 제거 된 경우 요소에서 바인딩 해제되지 않으면 메모리 누수가 발생할 수 있습니까?
답변:
짧은 대답 : 예
긴 답변 : 대부분의 브라우저는이를 올바르게 처리하고 해당 처리기를 제거합니다. 이것을 엉망으로 만드는 일부 오래된 브라우저 (IE 6 및 7)가 있습니다. 예, 메모리 누수가있을 수 있습니다. 이것에 대해 걱정할 필요는 없지만해야합니다. 한 번 봐 가지고 이 문서를 .
IE < 10은 야후와 AOL이 아닌 다른 사이트를 방문하는 사람이 사용하지 않고 사용하지 않는 것으로 간주 될 수 있다고 생각 합니다. 이 시점에서 IE를 유일하게 사용하는 사람은 이벤트 처리기가 브라우저의 속도를 늦추는 문제보다 인도 전화 사기의 희생양이되거나 바이러스에 감염 될 가능성이 더 높습니다.
여기에서 정보를 업데이트하기 만하면됩니다. 저는 특히 iframe onload 이벤트에서 순환 종속 이벤트 리스너에 대한 메모리 누수에 대해 다양한 브라우저를 테스트했습니다.
사용 된 코드 (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 증가합니다. 이벤트 리스너를 먼저 제거하면 항상 메모리 사용량이 낮아집니다 (누수 없음).
결과 :
결론 : 블리딩 엣지 애플리케이션은 이벤트 리스너를 제거하지 않으면 벗어날 수 있습니다. 그러나 성가심에도 불구하고 여전히 좋은 습관이라고 생각합니다.