移动端角度滤波器的性能限制

Question

我有 3000 个对象，每个对象都有许多属性，创建了一个 72,000 行 2MB 的 JSON 文件。

JSON 实际上是一个对象数据库，需要通过文本搜索过滤器以及通过将值与值数组进行匹配来进行过滤。

在初始视图中，我在 service 中执行此操作：

  this.loadJsonFile = function(url, process) {
    var defer = $q.defer();
    if (angular.isDefined(cache[url])) {
      if (angular.isDefined(cache[url]['then'])) {
        return cache[url];
      }
      defer.resolve(cache[url]);
      return defer.promise;
    }

    $http.get(url).success(function(data) {
      if (process) {
        data = process(data);
      }
      cache[url] = data;
      defer.resolve(data);
    }).error(function(err){
      defer.reject(err);
    });
    cache[url] = defer.promise;
    return defer.promise;
  };

  this.getExercises = function() {
    return this.loadJsonFile('data/exercises.json');
  };

在我的控制器中，所有结果都通过以下方式暴露给$scope：

api.getExcercises().then(function(data) {
  $scope.allExercises = data.results;
});

我将结果限制为：

$scope.limit = 56;

以前我每次需要搜索时都避免调用服务器，因为调用次数会非常多！这在有足够电量的 iPad Air 2 和 iPhone 6 上运行良好，但在 Galaxy Tab 上却很差。

我需要有关仅将有限数量的结果暴露给$scope 的策略的帮助，因为我认为被过滤和搅动的大量数据导致我的表现不佳。只要结果暴露给$scope（在加载屏幕之后说）性能非常出色，我就可以运行搜索/过滤功能并打破实时搜索功能的无缝性质。

查看服务器情况，我并不热衷于访问我的 Parse.com 服务器，因为它对 Angular 不友好，但 Firebase 的异步特性可能会起作用。我只是上传了我的 JSON 并通过以下方式将数据附加到 $scope：

var ref = new Firebase("https://URL_HERE.firebaseio.com/results"); 
$scope.allExercises = $firebaseArray(ref);

这与我的本地 JSON 方法非常相似。但是我想知道是否可以使用 Firebase 执行以下操作？

1. 加载按名称排序的初始 50 个结果。
2. 在文本搜索中键入时，会执行查询并传递 $scope 的结果。
3. 向过滤器数组添加值时，会根据暴露给 $scope 的值和结果查询 Firebase 上的数据。

Answer 1

请花点时间查看Firebase guide。它会阻止很多问题，这些问题已经在那里回答了。

1. 是的，类似：

   ref.orderByChild('name').limitToFirst(50);
   

2. 您必须运行如下查询：

   ref.orderByChild('name').startAt(searchString).limitToFirst(50);
   

   请注意，Firebase 查询不支持通配符搜索。请参阅guide's section on querying 了解更多信息。

Answer 2

您的问题是您的数据上的观察者数量巨大，而使用自动过滤器会创建更多的观察者，这些观察者会被调用两次。

我建议你实现一个数据库和一个搜索功能。

对于免费的解决方案（因为 FireBase 是付费的），我建议您使用带有 cordova sqlite plugin 的 sqlite 数据库

这在 android 和 ios 上运行良好，并且在 Windows Phone 上也有一些工作;)