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とorderByAngular に付属しているものですが、オブジェクト (配列のみ) では機能しないため、次のように作成しました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 に答える