如果我有一个父元素,其子元素绑定了事件侦听器,我是否需要在清除父元素之前删除这些事件侦听器?(即,parent.innerHTML = '';
)如果事件侦听器未从元素中解除绑定(如果元素已从 DOM 中删除),是否会发生内存泄漏?
在删除元素之前是否需要删除事件侦听器?
IT技术
javascript
dom
memory-leaks
dom-events
2021-03-08 01:14:14
2个回答
只是为了更新这里的信息。我一直在测试各种浏览器,特别是针对 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。首先删除事件侦听器总是会导致较低的内存使用量(无泄漏)。
结果:
- IE6 - 内存泄漏
- IE7 - 内存泄漏
- IE8 - 没有内存泄漏
- IE9 - 内存泄漏 (???)
- IE10 - 内存泄漏 (???)
- IE11 - 没有内存泄漏
- Edge (20) - 无内存泄漏
- Chrome (50) - 没有内存泄漏
- Firefox (46) - 很难说,不会严重泄漏,所以也许只是低效的垃圾收集器?无缘无故以额外的 4MB 结束。
- Opera (36) - 无内存泄漏
- Safari (9) - 无内存泄漏
结论:出血边缘应用程序可能可以通过不删除事件侦听器而逃脱。但我仍然认为这是一个很好的做法,尽管有烦恼。
简短回答:是的
长答案:大多数浏览器都会正确处理这个问题并自己删除这些处理程序。有一些较旧的浏览器(IE 6 和 7,如果我没记错的话)将其搞砸了。是的,可能存在内存泄漏。您不必担心这一点,但您需要这样做。看看这个文件。
其它你可能感兴趣的问题