Question

如果我的子元素包含绑定了事件监听器的子元素，那么在清除父级之前是否需要删除这些事件监听器？（即parent.innerHTML = '';）如果事件侦听器从DOM中删除，如果从DOM中删除它，是否会出现内存泄漏？

Answer 1

只是在这里更新信息。我一直在测试各种浏览器，特别是针对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） - 没有内存泄漏

结论：出血边缘应用程序可能无法移除事件侦听器。但是，尽管烦恼，我仍然认为这是一种很好的做法。

Answer 2

简短回答：是

答案很长：大多数浏览器都能正确处理并自行删除这些处理程序。有一些旧的浏览器（IE 6和7，如果我没记错的话）正在弄乱这个。是的，可能存在内存泄漏。你不应该担心这个，但你需要。看看this document。

在删除元素之前是否需要删除事件侦听器？

2 个答案: