jQuery $ (...). empty (). append (...) замедляет всю страницу после нескольких выполнений

Question

Я использую $('#...').empty().append(html) -подобную конструкцию для обновления контента в случае успеха AJAX. После 5-6 запросов вся страница становится медленнее и медленнее с каждым запросом (: hover появляется больше времени, JS замедляется и т. Д.). Это происходит в любом браузере. Чем больше контента загружено, тем быстрее происходит замедление.

Я думаю, что мне где-то не хватает очистки. Любой совет?

Код:

query = function (uri, data) {
    $.ajax({
        url: uri,
        cache: false,   
        data: data,
        success: processResponse,
        method: data?'POST':'GET',
    });
    return false;
}

processResponse = function (data) {
    $('#rightplaceholder').empty();
    $('#rightplaceholder').append(data);
}

$('#button').click( function () { query('/foo'); } );

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

Answer 1

Попробуйте вместо этого использовать $('#rightplaceholder').html(data);, объединяя две операции DOM в одну.

Также: измените cache: false на true, чтобы ускорить несколько запросов AJAX.Если вы не отправляете данные, то не должно быть причин не кэшировать результаты.

Answer 2

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

Удалите весь ненужный код или, удаляя со страницы элементы, добавленные другим кодом, убедитесь, что вы используете для этого их API, чтобы он мог очистить.

Answer 3

В целом функции jQuery имеют небольшую большую нагрузку, и я предполагаю, что сочетание ваших настроек и использования создает утечку / медлительность памяти где-то в системе.+1 для нахождения этого.

Если вы действительно просто заменяете html, вы можете использовать собственное свойство innerHTML, оно хорошо поддерживается и делает то, что вы пытаетесь сделать здесь.Обычно это лучший метод для замены больших количеств HTML.И, как уже упоминалось, еще лучше предотвратить много замен html.

Пример:

$('#rightplaceholder').innerHTML = data;

Обязательно установите .innerHTML после добавления элемента DOM на страницу, чтобы предотвратить утечки памяти.Поэтому использовать его на существующем элементе должно быть хорошо.