Как правильно изменять модель в AngularJS?

Question

[Philipp]

Имеется следующий работающий говнокод (не могу назвать иначе, ибо пока только учусь).

'use strict';

angular.module('dumpsterApp.controllers', []).
    controller('AppCtrl', function ($scope, socket) {
      $scope.tl = 20;
      $scope.news = [];
      socket.on('news', function (data) {
        $scope.news.push(data); // засовываем данные
        if ($scope.news.length > $scope.tl) { 
          $scope.news = $scope.news.slice(-$scope.tl); // а теперь удаляем
        }
      });
    })

Собственно имеется у меня подозрение, что ангуляр обновляет DOM сразу после пуша в массив $scope.news, а потом еще раз после слайса.
Скажите, что я неправ, или, если прав, подскажите, как сделать правильно. Т.е. запушить и заслайсить, а потом сделать рефреш дома.
Суть штуки простая - очень быстро изменяющаяся таблица (несколько раз в секунду, где-то 5-20). Хочу добиться минимальной нагрузки на процессор. Я слышал есть какой-то способ отключения прослушки внешнего изменения модели (со стороны DOM), но пока не знаю, как это правильно делать.

Answer 1

[Dmitry Dedukhin]

Вы неправы, dom обновляется один раз.
Если ваша таблица изменяется настолько часто, то предполагаю, что ваш вопрос происходит из-за того, что вы столкнулись с некими тормозами?

Comments

[Philipp]

На компьютере тормозов пока нет, а вот на телевизоре еще не пробовал. Сейчас в SmartTV есть браузер, там Angular и сокеты прекрасно себе живут. Зато производительность, конечно, не i7 :)
Там алгоритм выборки будет немножко сложнее, т.к. у каждого события свой вес. Важные должны будут задерживаться чуть дольше.

[Dmitry Dedukhin]

Если элементы вашего массива содержат уникальный идентификатор, потенциально можно немного уменьшить перерисовку, используя track by в ng-repeat.

[Philipp]

Dmitry Dedukhin: спасибо за наводку. Обязательно попробую.

Answer 2

[DigitalSmile]

Вообще я бы Вам посоветовал использовать limitTo (https://docs.angularjs.org/api/ng/filter/limitTo) и Queue для добавления элементов.
Что-то вроде (если я правильно понял задачу):

<div ng-repeat="item in news | limitTo:maxLength"> ... </div>

$scope.maxLength = 20;
      socket.on('news', function (data) {
        $scope.news.unshift(data); // засовываем данные
        
        if ($scope.news.length > $scope.maxLength) { // удаляем ненужное если значение превысило лимит
              $scope.news.slice($scope.maxLength, $scope.news.length - 1);
        }
      });

И по поводу Вашего вопроса - ангуляр вероятно не будет два раза перерисовывать дом дерево, он это наверянка сделает в следующем цикле $digest один раз.