Память для вкладки браузера: Heap
Когда вы открываете вкладку с сайтом, браузер выделяет для неё место в памяти. Её размер зависит от объёма ОЗУ; фронтенд-приложения могут потреблять до 4 ГБ, но обычно на 1–1.5 ГБ браузер начинает «притормаживать» вкладку, чтобы не допустить out of memory.
Как работает Heap? - Это область памяти, напоминающая облако, в котором разбросаны данные. Когда вы создаёте переменную (объект или массив), её данные помещаются в это «облако», а от переменной к ним тянется связь. - Сама переменная (её имя и ссылка) живёт в Stack — это быстрая память для фиксированных значений. Переменной в стеке присваивается адрес ячейки в Heap, например: 0x12345. - Когда мы создаём новую переменную и присваиваем ей значение предыдущей Например: let a = { id: 1 }; let b = a; для переменной b не создаётся новая запись в Heap. Ей просто присваивается ссылка на ту же область памяти, что и у переменной a. - Отсюда вытекают нюансы работы GC (Garbage Collector). Пока кто-то ссылается на область данных в Heap, она не будет удалена. Если сделать a = null то переменная b всё ещё будет ссылаться на этот объект и GC не освободит память.
Числа и строки Часто маленькие числа хранятся сразу в Stack — так быстрее, большие “уезжают” в Heap. А строки работают ещё интереснее: движок (например, V8) использует «интернирование строк». Если создать несколько переменных с одинаковым текстовым содержимым, движок может просто направить их на один и тот же адрес в памяти.
Call Stack Когда JS-файл исполняется и, например, вызывает функцию, внутри которой используется переменная-объект, движок v8 обращается в Heap по ссылке того объекта с которым работает, чтобы прочитать содержимое этого объекта.
Window, Document, Global Важный нюанс: данные, на которые ссылаются глобальные объекты (window, document), не очищаются GC автоматически, пока существует ссылка.
Пример на Vue.js Если в дочернем компоненте на onMounted добавить обработчик document.addEventListener(), но не удалить его в beforeUnmount, возникнет утечка памяти. Даже после размонтирования компонента весь его инстанс (все ref, computed, watch и все дочерние элементы с их инстансами) останется в памяти, так как обработчик события внутри document удерживает ссылку на область памяти компонента. Это самая частая причина утечек памяти в современных SPA.
· 02.02
Полезный пост! Многие недооценивают важность контроля памяти во фронтенде, пока приложение не начнёт лагать на сложных формах или после долгой работы. Не зря есть очень полезная вкладка "Performance" в devTools)
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
коммент удалён
· 02.02
Спасибо) пволностью согласен))
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён