Утечки памяти в addEventListener

Question

При регистрации события с помощью addEventListener на элементе, затем удалить этот элемент, не удаляя событие, и, повторяя это несколько раз, будет ли память "протекать"?

Answer 1

Не должно течь. Единственный браузер, который печально известен как утечка, как ад, когда обработчик событий вызывает цикл JS-объекта host-object <>, это IE (до версии 7), а IE (до версии 8) не поддерживает addEventListener.

Оставьте это включенным и посмотрите, как в долгосрочной перспективе будет зависеть использование памяти браузером, если вы хотите протестировать его в определенном браузере.

<div id="x"></div>
<script type="text/javascript">
    function replace() {
        var x= document.getElementById('x');
        if (x.firstChild!==null)
            x.removeChild(x.firstChild);
        var el= document.createElement('p');
        el.addEventListener('click', click, false);
        x.appendChild(el);
    }
    function click() {
        alert('click');
    };
    setInterval(replace, 1);
</script>

(Для того, чтобы проверить его с опорным контуром настоящего времени, переместить function click определение вверх в replace тело.)

Answer 2

Вы получите утечку памяти, если удалите из DOM элементы, к которым подключены прослушиватели. Но это происходит только в IE, Fx и другие имеют продвинутый GC.

Часто это происходит, если вы манипулируете элементами DOM не через DOM, а, например,

el.innerHTML = ...

Например, YUI имеет пользовательскую реализацию setInnerHTML, чтобы предотвратить утечку памяти в этом случае.