Javascript + IMG tags = утечка памяти. Есть лучший способ сделать это?

Question

У меня есть веб-страница, которая использует jquery для получения информации о продукте, поскольку люди смотрят на вещи, а затем отображает изображения последних продуктов, которые были замечены. Это в JQuery AJAX функции обратного вызова, которая выглядит очень похоже на это:

if(number_of_things_seen > 10) { 
    $('#shots li:last-child').remove(); 
} 

$('<li><img src="' + p.ProductImageSmall + '"></li>').prependTo('#shots'); 

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

Инспектор DOM Safari показывает, что DOM - это то, как я ожидал бы этого, но он, похоже, поддерживает ссылки на каждое изображение, которое он отобразил (как видно из this screenshot, если кто-то заинтересован).

Я добавил

$('#shots li:last-child img').remove(); 

в заявление удаления, чтобы не заметного эффекта.

Есть ли какая-то магия, позволяющая браузеру выпускать некоторые из этих материалов?

Answer 1

Можете ли вы попробовать изменить src последнего ребенка и посмотреть, не изменилось ли это? Вы можете переместить этот элемент будет первым потомком

//not tested 

var $list=$('#shots>li'); 
$list.filter(':last-child').children('img') 
.attr('src', p.ProductImageSmall) 
.parent() 
.insertBefore($list.eq(0)); 

Answer 2

как долго вы наблюдали это "растет до бесконечности? некоторые реализации сборщиков мусора не обязательно возвращают память обратно в ОС так быстро, если вообще. можете ли вы отделить то, что вы пытаетесь сделать, в реальном простом тесте (например, установив src изображения снова и снова) без ajax или обратных вызовов? есть ли у вас/вы можете попробовать это с другими браузерами?

Answer 3

Из Mozilla Developer Center on removeChild():

Удаленный дочерний узел по-прежнему существует в памяти, но больше не входит в DOM. Вы можете повторно использовать удаленный узел позже в своем коде через ссылку на объект oldChild.

Это ключ - повторное использование удаленного ребенка вместо повторного создания нового.

// I'm sure there is a nicer way to do it in jQuery 
if(number_of_things_seen > 10) { 
    var shots = document.getElementById("shots"); 
    var li = shots.getElementsByTagName("LI"); 
    var move = shots.removeChild(li[li.length-1]); 
    move.getElementsByTagName("IMG")[0].src = p.ProductImageSmall; 
    shots.insertBefore(move, li[0]); 
} 

Answer 4

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

см http://pastebin.me/4936458820c43

Answer 5

Дастина, кажется заявление InsertBefore в моем коде вызывает некоторые проблемы. Если вы видите этот новый тестовый пример, использование памяти остается довольно статичным, даже если я опустошаю последнего ребенка и вставляю новый новый фрагмент dom. Выполняется лучше, чем последняя попытка.

http://pastebin.me/4936519fea2cf

Answer 6

ли след действительно проблема?

Я подозреваю, что Safari кэширует все изображения, пока вы остаетесь на одном сайте, и вы ничего не можете с этим поделать. Если вам повезет, Safari выпускает ненужные объекты после достижения определенного предела.

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

Answer 7

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

window.setTimeout("location.reload()",1000*60*60);//refresh in an hour 

Answer 8

Как я недавно обнаружил, в Firefox есть ошибка, которая приводит к утечке тегов IMT.

Это можно обойти путем перемещения изображения в CSS:

if(number_of_things_seen > 10) { 
    $('#shots li:last-child').remove(); 
} 

$('<li><div style="background-image: url(\'' + p.ProductImageSmall + 
    '\'); background-repeat: no-repeat; background-position: center; '+ 
    ' width: 20px; height: 20px"></div></li>').prependTo('#shots'); 

Проверьте, чтобы увидеть, если это решит вашу утечку памяти.