Memory leaks
В своей работе я пару раз сталкивалась с необходимостью фиксить утечки памяти, и каждый раз было оооочень сложно. Task manager браузера, memory во вкладке Performance, отдельная вкладка Memory — у нас есть очень крутые инструменты, но пользоваться ими не так-то просто. Буду разбираться: как понять, есть ли проблемы; как найти причину утечки и почему вообще утечки появляются.
Полезные и интересные ресурсы
Devtools
- Раздел про Memory в Devtools — теория про память и утечки + описаны основные инструменты, предоставляемые хромом. Читать весь раздел 😉
- Debugging memory leaks - HTTP 203 — видео, где Jake и Surma разбирают, как дебажить и фиксить утечки памяти на примере своего кода
Как работает Garbage Collector и что там в V8
- Grokking V8 closures for fun (and profit?) by Vyacheslav Egorov (2012-14) —
как V8 работает с замыканиями и что там по перфомансу. Низкоуровневые детали, классные схемы, главные
мысли (как по мне):
- V8 создаёт контекст при входе в функцию, а не в момент создания замыкания
- Когда функции вложены друг в друга, контексты могут ссылаться друг на друга, создавая цепочки
Разбор кейсов
- JavaScript closure vs. object look-up performance by Marijn Haverbeke (2012) — автор рассказывает, почему переписал CodeMirror с одного огромного замыкания на объекты. Статья Grokking V8 closures for fun (and profit?) by Vyacheslav Egorov (2012-14), кстати, является ответом на этот пост в блоге.
- A surprising JavaScript memory leak found at Meteor by David Glasser (2013) — отличный разбор поиска проблемы и пример фикса, когда из-за замыкания в памяти оставался большой объект, который даже не использовался.
- Garbage collection and closures by Jake Archibald (2024) — снова разбор примера, как замыкание может помешать Garbage collector почистить что-нибудь нам не нужное. Бонусом — ссылки на баги в браузеры на это поведение.
Утечки в React
- Sneaky React Memory Leaks: How
useCallbackand closures can bite you by Kevin Schiener (2024) — в нашем коде на реакте много замыканий (даже если мы не помним про них) и в большинстве случаев всё будет хорошо. Пока мы не используемuseCallback, чтобы функция не пересоздавалась при каждом ререндере — Кевин подробно разбирает, что происходит в таком случае и как избежать утечки. - Sneaky React Memory Leaks II: Closures Vs. React Query by Kevin Schiener (2024) — разбор, как можно создать утечку, используя react query. Рекомендация простая — выносить всю работу с useQuery и подобными штуками в кастомные хуки, и чем меньше хук — тем лучше.
- Sneaky React Memory Leaks: How the React compiler won’t save you by Kevin Schiener (2024) —
React Compiler решит за нас часть проблем (например, пример из первой статьи не будет актуален), но замыкания
всё еще могут создать нам проблемы — Кевин рассказывает, какие, и предлагает использовать
bindдля того, чтобы избежать их.
Как найти утечку раньше, чем пользователи найдут её
// TODO
Как вычислить проблемный код и пофиксить
// TODO
Полезная теория
// TODO
Замыкания
// TODO
Garbage Collector
// TODO