Недавно у меня была возможность создать новое веб-приложение, и я решил попробовать Angular, чтобы лучше понять его. Так что да, ядовольно новый в этих рамках.

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

Приложение довольно простое - у него 2 экрана. Одна показывает список сделок, а другая - где пользователи могут добавлять / редактировать информацию о сделках - эта вторая страница представляет собой простую форму, ожидающую, что пользователь введет информацию, касающуюся сделок. Это выглядит так:

Выделенные разделы отображаются с использованиемng-repeat, Список ритейлеров насчитывает около 530 наименований, а список брендов насчитывает около 400 наименований.

После небольшого профилирования я понял, что посещение этого экрана второй формы будет увеличивать потребление памяти браузером. Первый экран не имеет такого эффекта. Я просто переключался между первым экраном и этим вторым экраном формы и обнаружил, что каждый раз, когда этот экран будет загружаться, потребление памяти будет увеличиваться на 50-75 МБ. В конце концов, браузер просто зависнет. Вот как выглядит профиль памяти:

Как видите, потребление продолжает расти, и никаких признаков ГХ нет! Каждый всплеск количества узлов и трассировки памяти соответствует посещению второго экрана на основе форм.

Сейчас я уже проверил множество проблем, связанных с угловым и потреблением памяти, но каждый из них упоминает, что$scope для любого из представлений будут удалены при загрузке нового представления.Количество узлов DOM конечно, не указывает на такую вещь для меня: /

Я также натолкнулся на 2 важных момента, связанных с использованиемng-repeat:

Избегайте вызова любой функции в пределахng-repeat директивы.Не используйте двустороннюю привязку, используяng-model в пределахng-repeat директивы.

И того, и другого я избежал на втором экране, и все же потребление памяти идет вверх.

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

Буду очень признателен за любую помощь в этом, так как мое решение продвинуться с использованием angular для остальной части портала зависит от решения этой проблемы.

Спасибо за чтение!

Обновление 1

На основеIlanПредложение, позвольте мне добавить, что я использую 2 плагина для рендеринга выпадающего списка и реализации выбора даты.

Для выпадающего я используюBootstrap-выберите и для выбора даты, я используюBootstrap-DatePicker.

Чтобы boottrap-select работал, мне пришлось написать собственную директиву, которая запускала трансляцию на$last событиеng-repeat, Это выглядит примерно так:

.directive('onFinishRender', function($timeout) {
    return {
        restrict : 'A',
            link : function(scope, element, attr) {
                if (scope.$last === true) {
                    $timeout(function() {
                        scope.$emit('ngRepeatFinished');
                     });
                 }
            }
      };
});

Затем в контроллере я полагаюсь на это событие, чтобы вызвать рендер для выпадающего плагина:

    $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
        $('#retailer').selectpicker('render');
    });

Для bootstrap-datepicker мне не нужно делать такую сложную вещь, поскольку мне нужно только обернуть поле ввода даты с помощью JS.

Обновление 2

После отключения плагинов потребление памяти резко уменьшается. Однако проблема утечки все еще сохраняется. Ранее при загрузке представления формы объем памяти увеличивался на 50–60 МБ. После выключения плагинов он скачет на 25-35 МБ. Но, как вы можете видеть ниже, потребление памяти продолжает накапливаться.