Утечки памяти и деградация производительности из-за забытых обработчиков событий!

Модальное окно открывается и закрывается, initModal вызывается многократно, а обработчик события остаётся подписанным. В результате одно и то же событие начинает обрабатываться N раз, что напрямую бьёт по производительности при последующих срабатываниях.

Типичный пример:
function initModal() {
window.addEventListener("resize", onResize);
}

function onResize() {
console.log("resize");
}

Если компонент или связанный с ним DOM удалён, но обработчик замыкает ссылки на него и не снят, он продолжает удерживать замыкания и объекты, блокируя сборку мусора и увеличивая потребление памяти.

Частая ошибка — потеря ссылки на обработчик:
element.addEventListener("click", () => {
console.log("click");
});

Такой обработчик невозможно корректно снять, потому что отсутствует reference на исходную функцию.

removeEventListener требует тот же объект функции, который использовался при подписке.

Корректный вариант:
function handleClick() {
console.log("click");
}

element.addEventListener("click", handleClick);

И при очистке:
element.removeEventListener("click", handleClick);

Часто незаметная ловушка — замыкания с тяжёлыми объектами:
function initModal() {
const modal = document.querySelector(".modal");
const bigData = Array.from({ length: 100_000 }, () => ({}));

function onResize() {
if (!modal) return;
modal.style.width = window.innerWidth + "px";
}

window.addEventListener("resize", onResize);
}

.modal удалён из DOM, но resize-обработчик остаётся подписанным, удерживая modal и bigData. Память не освобождается, логика продолжает выполняться при resize.

Правильный паттерн — явная инициализация и симметричная очистка:
function initModal() {
const modal = document.querySelector(".modal");

function onResize() {
if (!modal) return;
modal.style.width = window.innerWidth + "px";
}

window.addEventListener("resize", onResize);

return () => {
window.removeEventListener("resize", onResize);
};
}

Любая инициализация с обработчиками или фоновыми процессами должна иметь симметричную очистку.

Code Ready | #практика