Память для вкладки браузера: 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.

Память для вкладки браузера: Heap | Сетка — социальная сеть от hh.ru