Повышение производительности 100 изображений на одной странице без односторонней привязки

Question

У меня есть вид, который требует от меня более 100 изображений. Сегодняшний код выглядит примерно так:

 <figure ng-repeat="moment in moments | onlyEnabledMoments">
   <img image-spinner-src="{{constructFrame(moment)}}" 
        img-spinner-w="{{moment.Event.width}}" 
        img-spinner-h="{{moment.Event.height}}"
        image-spinner-loader="lines" on-tap="playEvent(moment)" />
 </figure>

Где constructFrame(moment):

$scope.constructFrame = function (moment) {
    var stream = "";
    stream = moment.Event.recordingURL + "/index.php?view=image" +
    "&eid=" + moment.Event.Id + "&fid=" +
    NVR.getSnapshotFrame() +
      "&width=" + moment.Event.thumbWidth * 2 +
      "&height=" + moment.Event.thumbHeight * 2;
    stream += NVR.getAuthToken();
    return stream;

  };

Обратите внимание, что причина, по которой я вызываю функцию, заключается в том, что функция возвращает токен, который изменяется время.

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

Как улучшить производительность?

Answer 1

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

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

2. Я избавился от шаблона HTML фильтр, (onlyEnabledMoments). Я мог бы использовать службу $filter, но на самом деле в этом не было необходимости. Я просто заполнил массив без элементов, которые мне не нужны (фильтр был просто ленивым кодированием с моей стороны). Я считал, что фильтры вычисляются дважды каждый цикл дайджеста.

3. Я нашел способ обойти URL изображения и constructFrame - если вы помните, моя проблема заключалась в том, что токен аутентификации изменяется один раз через некоторое время Но на самом деле не нужно пересчитывать при каждом дайджесте. Так что я обошел его так:

<span ng-if="!authRecomputingTrigger">
 <figure ng-repeat="moment in moments">
  <img image-spinner-src="::{{constructFrame(moment)}}" 
            img-spinner-w="::{{moment.Event.width}}" 
            img-spinner-h="::{{moment.Event.height}}"
            image-spinner-loader="lines" on-tap="playEvent(moment)" /> 
 </figure>
</span>

И в моем коде, когда пересчитывается auth, я делаю что-то вроде:

$scope.authRecomputingTrigger = true;
$timeout (function() {$scope.authRecomputingTrigger=false;},300);

Это заставляет Пользовательский интерфейс refre sh (300 мс, чтобы быть в безопасности, я полагаю, что даже 10 мс - это нормально, поскольку циклы дайджеста составляют 10 мс). Это ужасный хак, но преимущества в производительности были огромны