1

我有一个相当大的数据集要由 AngularJS 提供。加载需要几秒钟，即时搜索有点迟缓。但过了一会儿，Chrome 抱怨脚本占用了太多内存，并询问是否继续。

所以我检查了这个过程，我在 ng-repeat 中有复杂的过滤器，过滤多个输入，排序，分页，限制等。

<tr ng-repeat="rec in records | my filter : [model1, model2, model3] | sort: model4 | start: model5 | limit: model6">

根据我所做的，我必须从每个过滤器的输入中创建一个新数据集，例如使用 $.map() 或 $.grep()，它会创建原始数据集的新对象。我的问题是，它应该一直到最后一个过滤器完成，才会呈现视图。然后所有中间数据集克隆都将被垃圾收集，处理这个问题是否有角度？或者我如何明确地 gc 他们？

或者说在 Angular 中做这件事的最佳实践是什么？

PS。以下是 ng 过滤器如何工作的示例：

msApp.filter('startFrom', function() {
    return function(input, start) {
        if (!input) return [];
        return input.slice(+start); // +start, parse to int
    };
});

因此，每次模型更改时，此过滤器都会运行并创建一个新列表。我有几个在一个链中。

4

1 回答 1

0

我通过几个链式过滤器（过滤和排序元素）传递一些对象，我只是删除了过滤器以检查内存消耗差异。

实际上，当对象通过过滤器时，应用程序使用的内存少于过滤器不存在时的内存。

这些是其中的一些：

<li 
ng-repeat="item in list.items | object2Array | filter:searchItems | orderBy:'data.label'" 
class="status-{{item.data.status}} todo-item" 
title="{{item.data.status}}">

filter并且orderBy是Angular附带的，但它们不适用于对象（仅适用于数组），所以我做了object2Array：

myApp.filter('object2Array', function() {
    return function(input) {
      var out = [];
      for(i in input){
        out.push(input[i]);
      }
      return out;
    }
  });

存储在原始对象中的对象被保留，只是在另一个数组中引用，因此双向绑定仍然有效。不仅其他过滤器现在可以工作，而且不知何故，该应用程序现在消耗的内存少了一点。

于 2013-07-24T02:58:59.410 回答