Решение DOM Утечки памяти

У меня есть немного <div> элементы, содержимое которых необходимо перезагружать каждый интервал следующим образом:

<div id="some_id"></div>

...

<script>
setInterval(function() {
   // Reset the contents of wrapper div element// 
   wrapper = document.getElementById('some_id');
   // Creating a video-element//
   wrapper.innerHtml = ''
   v2 = document.createElement('video');
   v2.src = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
   v2.setAttribute('preload', 'metadata');

   wrapper.appendChild(v2);

   // Allowing both wrapper & v2 to be eligible for garbage-collection//
   wrapper = null;
   v2 = null;
}, 5000);
</script>

Объем памяти в Chrome постепенно увеличивается, и не видно никаких признаков сбора мусора для элементов, которые были удалены / отсоединены. Следы памяти устанавливаются на одно и то же значение и не уменьшаются даже после того, как я вызову clearInterval(). Какой более практичный способ удалить содержимое внутри элемента div, чтобы избежать утечек памяти?

Вот скриншоты вывода вместе с объемом памяти (меню Chrome -> Дополнительные инструменты -> диспетчер задач).

Скриншоты

РЕДАКТИРОВАТЬ 1: я попытался очистить упаковщик следующим образом:

в то время как (wrapper.firstChild){wrapper.removeChild(wrapper.firstChild)}

Те же результаты

1 ответ

Я полагаю, у вас есть опечатка в коде. Вместо wrapper.innerHtml = '' это должен быть innerHTML. Я выполнил код в течение 5 минут в chrome, а моментальный снимок кучи постоянен и составляет 4,9 МБ. Так что нет утечек памяти.