Освобождается ли память, если переписать innerHTML?

[Was-Ja]

Добрый день,

в логике моей системы - у меня есть <div id=myframe></div> в который я записываю в document.getElementById('myframe').innerHTML то что я регулярно запрашиваю с сервера.

Там приходит целый текст, со набором кнопок, забинденных евентов, и много чего.

Пока все работает нормально, но я ожидаю, что у меня может набираться много таких запросов.

Скажите, пожалуйста, что происходит в браузере, если я переписываю содержимое innerHTML, удаляет ли он из своей памяти память под ресурсы, которые были до этого, или то, что я делаю - это потенциальное место съесть всю оперативную память на стороне клиента?

Если да, скажите, пожалуйста, есть ли какой-то простой способ гарантированно удалить все ресурсы, которые были аллоцированы в предыдущей версии того, что было в innerHTML?

Спасибо!

[рони]

есть ли какой-то простой способ гарантированно удалить все ресурсы

while (elem.firstChild) {
   elem.firstChild.remove()
}

[voraa]

while (elem.firstChild) {
   elem.firstChild.remove()
}

elem.innerHTML = '';
Ничуть не хуже.

есть ли какой-то простой способ гарантированно удалить все ресурсы, которые были аллоцированы в предыдущей версии того, что было в innerHTML?

Гарантированного способа нет.

<div id=clear>
 bla-bla-bla
<div id=noremove>bla-bla-bla</div>
 bla-bla-bla
</div>

let dc=document.getElementById('clear');
let dnr =document.getElementById('noremove');

dc.innerHTML = '';

div clear - очистится, но div noremove продолжит свое существование вместе с занятыми ресурсами в памяти, пока переменная dnr (или какая то другая) ссылается на него. Его даже можно вставить куда то.

Далее

function f () {....}
let bf = f.bind(dnr);

Пока существует переменная bf и ссылается на функцию, div noremove не будет удален из памяти

[Was-Ja]

Огромное спасибо за ответы!

Да, подсадов много, и, как я понимаю, можно что-то таки не удалить...

А если поступить так, что во всех новых вариантах <div> новые ID будут всегда организованы как MyDIV_%d, где %d будет всегда нумероваться с 0 и ограничиваться общим числом <div>.

Скажите, пожалуйста, правильно ли я понимаю, что в этом случае я могу надеяться, что если у меня был MyDIV_111 в первой версии и я таки не удалил ссылку на document.getElementById('MyDIV_111'), то после следующего вызова и выделения нового <div id=MyDIV_111></div> по крайней мере старая память будет удалена, или тут все еще нет гарантии?

Скажите, пожалуйста, а как дело обстоит с event, грубо говоря у меня везде еще есть onclick=MyFunc(111)?

Спасибо!

[voraa]

Скажите, пожалуйста, правильно ли я понимаю, что в этом случае я могу надеяться, что если у меня был MyDIV_111 в первой версии и я таки не удалил ссылку на document.getElementById('MyDIV_111'), то после следующего вызова и выделения нового <div id=MyDIV_111></div> по крайней мере старая память будет удалена, или тут все еще нет гарантии?

В общем случае нет никакой гарантии. С точки зрения JavaScrit ваш div это обычный Object. И пока на него есть ссылка (пока он достижим из глобальной области) он будет существовать в память. А то, что у двух различных объектов есть одинаковое свойство с одинаковым значением никого не волнует.
Не все так страшно, конечно. Если на эти объекты ссылаются локальные переменные в функции, то по окончанию работы функции пропадут эти переменные, не будет ссылок и память будет освобождена. Или если в глобальную переменную вы запишете ссылку на новый объект, то на старый никто ссылаться не будет и его уберут.

Скажите, пожалуйста, а как дело обстоит с event, грубо говоря у меня везде еще есть onclick=MyFunc(111)?

Тут объект ссылается на функцию, а не функция на объект. Так, что объект будет удаляться, когда не станет ссылок на него.

[Rise]

Was-Ja,
Память можно мониторить на вкладке Memory в DevTools (F12). В Chrome еще есть Performance monitor.