时间戳

首页 > 解决方案 > 在没有单向绑定的情况下提高一页中 100 个图像的性能

angularjs - 在没有单向绑定的情况下提高一页中 100 个图像的性能

问题描述

我有一个视图，需要我显示大约 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 多张图像，在移动设备上的性能很差。我知道这可能是由于不断的表达式评估。我不能在这里使用单向绑定，因为令牌可能会改变。

如何提高性能？

标签： angularjs

解决方案

我想就一些简单的更改如何产生重大影响发表后续文章。我的用户现在报告说滚动和使用非常有用，无论是在移动设备还是台式机上。

  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>

在我的代码中，当重新计算身份验证时，我会执行以下操作：

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

这会强制刷新 UI（300 毫秒是安全的，我想即使是 10 毫秒也可以，因为摘要周期是 10 毫秒）。这是一个丑陋的黑客，但性能优势是巨大的

推荐阅读