1

Здравствуйте! Обнаружил проблему с памятью в своём приложении. Есть функция, которая загружает данные с сервера и добавляет их в таблицу. При повторном вызове, он очищает таблицу bodyObj.children().remove(); и добавляет туда новые данные. Если добавляю данные таким способом:

var rows = [];

for(var i = 0, len = response.length; i < len; i++) {
    rows.push($('тут всякие строки таблицы в HTML коде'));
}

bodyObj.append(rows);

то браузер с каждой загрузкой жрёт всё больше и больше оперативной памяти.

Если же сразу добавляю строки таблицы без массива:

for(var i = 0, len = response.length; i < len; i++) {
    $('тут всякие строки таблицы  в HTML коде').appendTo(bodyObj);
}

то ситуация становится гораздо лучше. Подскажите, пожалуйста, почему так происходит?

function loadLegalList(contractId) {
var bodyObj = $('#legalList').find('tbody');

bodyObj.children().remove();
bodyObj.append(getLoadMsg($('#legalListTable th').length));

$.getJSON('/BSS/clients/listLegalJson.action', $.extend({}, filterData, addPrefix(pagerData, 'pager'), sortedData), function(response) {
    bodyObj.children().remove();

    var errors = checkError(response);
    if(errors !== undefined) {
        bodyObj.append(getAlertMsgTr($('#legalListTable th').length, errors));

        return;
    }

    pagerData = response.pager;
    initPager(false);

    //var rows = [];
    for(var i = 0, len = response.clients.length; i < len; i++) {
        var t = response.clients[i];

        var clss = "";
        if(t.hidden) {
            clss += " cliendHidden";
        }
        if(t.contractStatus == 1 || t.contractStatus == 2) {
            clss += " cliendDisabled";
        }

        var colsToSpanCount = $('#legalListTable th').length - 1;
        $('' +
                '<tr id="client_' + t.contractId + '" class="clientRow' + clss + '" data-contract-id="' + t.contractId + '" data-hidden="1">' + 
                '    <td align="center" class="ui-state-default">' + (i+1) + '</td>' +
                '    <td align="center">' + t.contractTitle + '</td>' +
                '    <td               >' + (t.contractClient === null ? '&nbsp;' : t.contractClient) + '</td>' +
                '    <td align="center">' + (t.manager === null ? '&nbsp;' : t.manager.title) + '</td>' +
                '    <td align="center">' + (t.invoiced === null ? '&nbsp;' : t.invoiced) + '</td>' +
                '    <td align="center">' + (t.delivery === null ? '&nbsp;' : t.delivery.title) + '</td>' +
                '    <td align="center">' + (t.sending === null ? '&nbsp;' : t.sending.title) + '</td>' +
                '    <td align="center">' + (t.sended === null ? '&nbsp;' : t.sended) + '</td>' +
                '    <td>' + (t.prevContractBalance === null ? '&nbsp;' : 
                    '       <table class="balanceTable">' +
                    '           <tr><td>Вх:' + '</td><td align="right">' + t.prevSum1.toFixed(2) + '</td></tr>' +
                    '           <tr><td>Пл:' + '</td><td align="right">' + t.prevSum2.toFixed(2) + '</td></tr>' +
                    '           <tr><td>Нар:' + '</td><td align="right">' + t.prevSum3.toFixed(2) + '</td></tr>' +
                    '           <tr><td>Исх:' + '</td><td align="right">' + t.prevContractBalance.toFixed(2) + '</td></tr>' +
                '       </table>') +
                '   </td>' +
                '    <td>' + (t.contractBalance === null ? '&nbsp;' : 
                '       <table class="balanceTable">' +
                '           <tr><td>Вх:' + '</td><td align="right">' + t.sum1.toFixed(2) + '</td></tr>' +
                '           <tr><td>Пл:' + '</td><td align="right">' + t.sum2.toFixed(2) + '</td></tr>' +
                '           <tr><td>Нар:' + '</td><td align="right">' + t.sum3.toFixed(2) + '</td></tr>' +
                '           <tr><td>Исх:' + '</td><td align="right">' + t.contractBalance.toFixed(2) + '</td></tr>' +
                '       </table>') +
                '   </td>' +
                '    <td align="center">' + (t.lastCall === null ? '&nbsp;' : t.lastCall) + '</td>' +
                '    <td               >' + (t.comment === null ? '&nbsp;' : t.comment) + '</td>' +
                '</tr>').appendTo(bodyObj);
        $('' +
                '<tr id="client_data_' + t.contractId + '" class="clientDataRow hidden" data-contract-id="' + t.contractId + '">' + 
                '    <td align="center" class="ui-state-default">&nbsp;</td>' +
                '    <td colspan="' + colsToSpanCount + '">' +
                '        <div class="clientInfoWrapper">' +
                '            <div class="clientInfoHeader ui-widget-header ui-corner-top">Информация по договору</div>' +
                '            <table class="clientInfoTable">' +
                '                <tbody>' +
                '            </table>' +
                '            <button class="updateClientInfoButton" type="button" value="' + t.contractId + '">Изменить</button>' +
                '            <button class="hideClientInfoButton" type="button" value="' + t.contractId + '">Скрыть</button>' +
                '        </div>' +
                '        <div style="clear: both;"></div>' +
                '        <div class="clientCommentsWrapper">' +
                '            <div class="clientCommentsHeader ui-widget-header ui-corner-top">Список временных комментариев</div>' +
                '            <table class="clientCommentsTable">' +
                '                <thead class="ui-widget-header">' +
                '                    <tr>' +
                '                        <th class="ui-state-default">№</th>' +
                '                        <th class="ui-state-default">Создано</th>' +
                '                        <th class="ui-state-default">Создано</th>' +
                '                        <th class="ui-state-default">Комментарий</th>' +
                '                    </tr>' +
                '                </thead>' +
                '                <tbody/>' +
                '            </table>' +
                '            <button class="addClientCommentButton" type="button" value="' + t.contractId + '">Новый комментарий</button>' +
                '        </div>' +
                '        <div style="clear: both;"></div>' +
                '        <div class="clientCallsWrapper">' +
                '            <div class="clientCallsHeader ui-widget-header ui-corner-top">Список звонков</div>' +
                '            <table class="clientCallsTable">' +
                '                <thead class="ui-widget-header">' +
                '                    <tr>' +
                '                        <th class="ui-state-default">№</th>' +
                '                        <th class="ui-state-default">Создано</th>' +
                '                        <th class="ui-state-default">Создано</th>' +
                '                        <th class="ui-state-default">Комментарий</th>' +
                '                    </tr>' +
                '                </thead>' +
                '                <tbody/>' +
                '            </table>' +
                '            <button class="addClientCallButton" type="button" value="' + t.contractId + '">Новый звонок</button>' +
                '        </div>' +
                '        <div style="clear: both;"></div>' +
                '        <div class="clientTransmissionsWrapper">' +
                '            <div class="clientTransmissionsHeader ui-widget-header ui-corner-top">История выставления документов</div>' +
                '            <table class="clientTransmissionsTable">' +
                '                <thead class="ui-widget-header">' +
                '                    <tr>' +
                '                        <th class="ui-state-default">№</th>' +
                '                        <th class="ui-state-default">Создано</th>' +
                '                        <th class="ui-state-default">Создано</th>' +
                '                        <th class="ui-state-default">Месяц</th>' +
                '                        <th class="ui-state-default">Email</th>' +
                '                        <th class="ui-state-default">Комментарий</th>' +
                '                    </tr>' +
                '                </thead>' +
                '                <tbody/>' +
                '            </table>' +
                '            <button class="addClientTransmissionButton" type="button" value="' + t.contractId + '">Новая запись</button>' +
                '        </div>' +
                '        <div style="clear: both;"></div>' +
                '    </td>' +
                '</tr>').appendTo(bodyObj);
    }
    //bodyObj.append(rows);
    colHandler();
    bodyObj.find('.clientRow').hover(
            function() {
                $(this).addClass('ui-state-hover');
            }, function() {
                $(this).removeClass('ui-state-hover');
            }
        );

    if(!!contractId && $('#client_' + contractId).length > 0) {
        $('#client_' + contractId).click();
        $('#client_' + contractId).get(0).scrollIntoView(true);
    }
});

}

8
  • А данный пример одинаково ведет себя во всех браузерах? Может просто какой-нибудь сборщик мусора в браузере не успевает запуститься, вот и память якобы растет, хотя реальной утечки никакой нет? Ради интереса можно попробовать после добавления всех строк добавить rows = null;
    – Aries
    14 сен 2015 в 13:16
  • А можно в виде целого сниппета, чтобы можно было посмотреть работающий код?
    – Qwertiy
    14 сен 2015 в 13:19
  • Добавил код всей функции, уже в исправленном виде. Весь JS код, слишком объёмно выкладывать, думаю.
    – STepeR
    14 сен 2015 в 13:22
  • проверял в хроме и лисе, поведение одинаковое, добавление 'rows = null;' не помогает;
    – STepeR
    14 сен 2015 в 13:37
  • - попробуйте вместо null, сделать delete row; - вместо .remove() сделайте bodyObj.html('')
    – mig
    14 сен 2015 в 16:27

3 ответа 3

0

Никогда не создавайте большие ветки DOM посредством конструктора jQuery - это очень дорогая операция, плюс к тому, не слишком надейтесь на интеллект сборщика мусора, но только на свой и удаляйте созданные структуры javascript вручную. Помните, что объект всегда передаётся по ссылке, но не вычистится из памяти пока на него есть хоть одна ссылка. Если уж у вас есть некий большой список или объект - не создавайте его каждый раз с момощью var - храните его в одном месте и только модифицируйте. Это общие советы конечно, однако они - как включить свет перед входом в сарай с граблями.

Настоятельно рекомендую немедля обратиться к Ractive, или, если некогда разбираться - к jquery шаблонизатору, такому как этот. И то, и другое, несложно внедрить даже в очень запущенный проект, но тут же начнёт экономить ваше время и нейроны.

0

В итоге оказалось, что неправильно был составлен один из селекторов var bodyObj = $('#legalList').find('tbody'); получалось, что строки добавляются к нескольким объектам, потом вешались обработчики и пр. Почему при этом один способ жрал меньше памяти, чем другой, разбираться не стали)

-1

В Вашем случае не нужен массив и, тем более, обертка jquery в цикле, просто делаете конкатенацию строк, а потом уже вставку:

var rows = '';

for(var i = 0, len = response.length; i < len; i++) {
    rows += 'тут всякие строки таблицы в HTML коде';
}

$('table').append(rows);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.