Утечки памяти во фронтенде
Вопрос
Откуда берутся утечки памяти в браузерном приложении?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
сборщик мусора удаляет то, до чего нельзя дойти от корней
неснятые обработчики событий держат узел и замыкание
таймеры и подписки, не очищенные при размонтировании
глобальные кэши и массивы, которые только растут
замыкание держит весь объект ради одного поля
детач DOM: узел удалён из дерева, но на него есть ссылка в JS
Что могут спросить следом
- Как найти утечку в DevTools
- Чем поможет WeakMap или WeakRef
- Что произойдёт, если не отписаться в useEffect
Разбор
Сборщик мусора освобождает объекты, до которых нельзя дойти от корней (глобальные объекты, стек). Утечка - это всегда живая ссылка, о которой забыли.
Типичные источники во фронтенде: обработчик, добавленный на window/document и не снятый
при размонтировании; setInterval без clearInterval; подписка на стор или сокет без
отписки; растущий кэш в модульной переменной; отсоединённый DOM-узел, на который осталась
ссылка в массиве. В React всё это лечится возвратом функции очистки из useEffect.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.