AngularJS 数组和增量内存使用答案

【问题标题】：AngularJS arrays and incremental memory usageAngularJS 数组和增量内存使用
【发布时间】：2017-06-05 19:19:52
【问题描述】：

我正在使用 $timeout 定期从后端提取表格数据并以 HTML 格式显示它们。我怀疑每次获得更新时，都会在浏览器中为 JSON 数组分配一个新的内存段。我想知道是不是这样。以下是简化的代码片段。

HTML`

<tr ng-repeat="measurement in measurementResults">
  <td>{{measurement.type}}</td>
  <td>{{measurement.value}}</td>
</tr>

function startTimeout() {
  MeasurementService.getNewMeasurements(function (measuredData) {
    $scope.measurementResults = measuredData;

  });

  $timeout(startTimeout, 15000);

}

startTimeout();

这是我传递给 $scope 的 JSON 数据数组格式。

[{"type":type1,"value":10}, {"type":type2,"value":20}, {"type":type3,"value":80}]

每次我从服务回调接收到 measureData 时，$scope.measurementResults 是否都指向一个新的内存位置（或创建一个新数组）？

编辑： 我附上了两张内存图的截图，第一张展示了节点如何上下移动（绿线），第二张展示了应用“track by $index”后线条如何变平

【问题讨论】：

是的，每次 XHR 使用新内存从服务器接收数据时。 assignment operator 将$scope.measurementResults 指向新内存，旧内存被释放用于垃圾回收。
我观察到内存使用量的增加，例如，在 Chrome 和 Firefox 中，在我进行此类定期调用的每个页面上。我不知道这是因为我的代码，还是因为浏览器没有释放旧内存。不过，我在 Safari 中没有观察到这一点，它保持稳定。
您使用的是哪个版本的 AngularJS？有 ng-repeat 内存泄漏问题已在 Version1.3 中得到修复。有关详细信息，请参阅GitHub AngularJS Issue #10121。
1.5.0版本

标签： angularjs arrays memory timeout

【解决方案1】：

//You may use track by for performance boost
<tr ng-repeat="measurement in measurementResults track by $index">
  <td>{{measurement.type}}</td>
  <td>{{measurement.value}}</td>
</tr>

【讨论】：

太好了，通过 $index 跟踪显着降低了内存使用量，从每次调用的近 1 MB 泄漏下降到每次调用的 10-20 KB。我有多个嵌套的 ng-repets，这个“跟踪”做得很好。然而，正如 georgeawg 所提到的，即使 angular 1.5 仍然存在 rg-repeat 的内存泄漏问题。
截图来自一个轻量级的测试页面，顺便说一下，不是真实的。
仍然可以使用一种方式绑定来提高性能。请参考此文档。确保它有意义并提供帮助。stackoverflow.com/questions/33480548/…