Выбор ответа Middle Память и сборка мусора обновлено
Удалённые из DOM, но живые узлы
Вопрос
Карточки удаляются со страницы, но память растёт. Почему?
const cache = [];
function addCard(data) {
const el = document.createElement('div');
el.textContent = data.title;
list.append(el);
cache.push(el);
}
function removeCard(el) {
el.remove();
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Удалённые элементы остаются в массиве cache: это detached DOM-узлы. el.remove() действительно убирает элемент из документа, но массив cache по-прежнему ссылается на него.
Варианты ответа
el.remove()не удаляет элемент из DOM, а только скрывает его со страницы- Удалённые элементы остаются в массиве
cache: это detached DOM-узлыправильный ответ textContentсоздаёт копию строки, которая никогда не освобождается сборщиком- Сборщик мусора не работает с DOM-элементами в принципе, их чистит только браузер
Разбор
el.remove() действительно убирает элемент из документа, но массив cache по-прежнему ссылается на него. Элемент остаётся достижимым и живёт в памяти вместе со своим поддеревом. В DevTools такие узлы видны в снимке кучи по фильтру Detached. Исправление: удалять ссылку из cache при удалении или хранить данные в WeakMap/WeakSet. Строки из textContent освобождаются обычным образом, а DOM-узлы собираются сборщиком, если на них нет ссылок.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.