Как избавиться от элементов DOM в JavaScript, чтобы избежать утечек памяти

У меня есть приложение, которое позволяет пользователю просматривать детали в конкретном случае без обратной передачи. Каждый раз, когда пользователь запрашивает данные с сервера, я вытаскиваю следующую разметку.

<form name="frmAJAX" method="post" action="Default.aspx?id=123456" id="frmAJAX">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" />
</div>
<div id="inner">
<!-- valid info here --!>
</div>
</form>

Затем я беру выше и innerHTML его в новый элемент DOM, например:

   success: function(xhtml) {
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        var container = document.createElement('div');

        obj.parentNode.parentNode.parentNode.insertBefore(tr, obj.parentNode.parentNode.nextSibling);

        td.appendChild(container);
        container.innerHTML = xhtml;
        tr.appendChild(td);

но после вышесказанного, я использую некоторый jQuery, чтобы удалить неприятный мусор aspnet

$('form:eq(1)').children().each(
    function() {
        if ($('form:eq(1)').find('div').filter(function() { return $(this).attr('id') == ''; }).remove());
    }
);

//Capture the remaining children
var children = $('form:eq(1)').children();

// Remove the form
$('form:eq(1)').remove();

// append the correct child element back to the DOM
parentObj.append(children);

Мой вопрос в том, что при использовании IESieve Я не вижу никаких фактических утечек, но постоянно растет количество элементов DOM (таким образом, использование памяти).

Что я могу улучшить на стороне клиента, чтобы фактически очистить этот беспорядок? Обратите внимание: оба IE7/8 показывают эти результаты.

РЕДАКТИРОВАТЬ. Наконец, я получил эту работу и решил написать короткое сообщение

Ответ 1

Сложная часть выясняет, где ссылка все еще существует для нарушающих узлов.

Вы делаете это тяжело - вы добавляете всю разметку на страницу, а затем удаляете ненужные вещи. Я бы сделал это следующим образом:

var div = document.createElement('div');
// (Don't append it to the document.)

$(div).html(xhtml);

var stuffToKeep = $(div).find("form:eq(1)> *").filter(
  function() {
    return $(this).attr('id') !== '';
  }
);

parentObj.append(stuffToKeep);

// Then null out the original reference to the DIV to be safe.
div = null;

Это не гарантирует остановки утечки, но это хороший старт.

Ответ 2

function discardElement(element) {
    var garbageBin = document.getElementById('IELeakGarbageBin');
    if (!garbageBin) {
        garbageBin = document.createElement('DIV');
        garbageBin.id = 'IELeakGarbageBin';
        garbageBin.style.display = 'none';
        document.body.appendChild(garbageBin);
    }
    // move the element to the garbage bin 
    garbageBin.appendChild(element);
    garbageBin.innerHTML = '';
}

Источник

Ответ 3

remove(), и его ilk удаляет только элементы из DOM. Они все еще существуют в памяти.

Это известная проблема с AJAX и Web 2.0. Там мало что можно сделать, помимо проектирования вашего сайта, чтобы вы иногда обновляли страницу, чтобы стереть вещи.

Ответ 4

Я думаю, что "всегда растущее потребление памяти" несколько неправильно понято. Это связано с управлением памятью внутри браузера (а также на Windows в целом) больше, чем с вашим JS-кодом. Менеджеры памяти обычно продолжают выделять (или не выпускать), пока они этого не сделают. В системах на основе файлов страниц и отображения памяти выделение и освобождение памяти занимает очень много времени.

Итак, даже если ваши узлы освобождены от фактической структуры документа и DOM - вряд ли можно измерить ее из самой Windows в режиме реального времени.

Попробуйте следующее:

Запустите Taskmanager, перейдите на вкладку процесса и посмотрите память своего браузера.
Загрузите в HTML-документ, который выделяет 100 000 узлов, наблюдайте увеличение потребления памяти
Нажмите кнопку на странице, которая освобождает все узлы. Обратите внимание, что мало что происходит с точки зрения освобождения памяти.
Теперь сверните окно браузера и увеличьте его снова. В 90% случаев браузер теперь сбрасывает память, если не использует, и вы увидите, сколько она действительно потребляет.

Вы можете использовать браузер 500 мегабайт оперативной памяти (не выше упомянутого примера), но когда вы минимизируете и максимизируете его, он освобождает все, и вдруг он использует только 50 мегабайт.