1

私は、おおよそ 100 ~ 200 アイテムの間でさまざまな長さの大きなデータ配列と戦ってきましたが、それ以上になることもあります。

データ項目自体は、オブジェクトの配列を生成するカスタム レポート アルゴリズムから取得されます。

オブジェクトの例:

ts:budget: "foo"
ts:category: "foo"
ts:client: "foo"
ts:entryTime: 14.5
ts:project: "foo (00000000)"
ts:task: "foo"
ts:user: "foo"
ts:userGroup: "foo"

そのオブジェクトの例に 100 ~ 200 を掛けると、それが私が取り組んでいるものです。大したことはないので、これほど大きなパフォーマンス ヒットは期待していませんでした。私はそれが問題である私の工場コードであると非常に疑っていますが、いくつかの領域を調べて最適化し (つまり、angular.ForEach ループをネイティブの for ループに置き換える)、パフォーマンスを取り戻しましたが、それでも CPU 使用率は約 25% に達しています。工場が呼び出されたとき。

工場コード:

var report = '{"userID":"111868022517936189634", "jsonPayload":{"metrics":[{"ID":"ts:entryTime"}],"dimensions":[' + dimensions + '],"filters":[]}}';
var promise = $http.post("report.php?action=show&type=report&rangeStart=" + rangeStart + "&rangeEnd=" + rangeEnd, report).success(function(results) {
    var uniqueArray = [];
    for (m = array.length - 1; m >= 0; m--) {
        var subItemUniqueArray = [];
        if (uniqueArray.indexOf(array[m]) == -1) {
            uniqueArray.push(array[m]);
            for (k = uniqueRequireArray.length - 1; k >= 0; k--) {
                uniqueRequireArray[k] == 'category' ? array[m]['categories'] = [] : array[m][uniqueRequireArray[k] + 's'] = [];
            }
            for (j = results.length - 1; j >= 0; j--) {
                for (var x in results[j]) {
                    if (results[j].hasOwnProperty(x)) {
                        if (x == 'ts:' + type) {
                            var relationString = null;
                            type != 'project' ? relationString = array[m][relation] : relationString = array[m].name + ' (' + array[m].projectNumber +')';
                            if (results[j][x] == relationString) {
                                for (i = uniqueRequireArray.length - 1; i >= 0; i--) {
                                    var obj = {
                                        'item': results[j]['ts:' + uniqueRequireArray[i] + '']
                                    }
                                    if (subItemUniqueArray.indexOf(obj.item) == -1) {
                                        uniqueRequireArray[i] == 'category' ? array[m]['categories'].push(obj) : array[m][uniqueRequireArray[i] + 's'].push(obj);
                                        subItemUniqueArray.push(obj.item);
                                        obj.entryTime = results[j]['ts:entryTime'];

                                        if (uniqueRequireArray[i] == 'user') {obj.externalID = $userlookup.email(obj.item);} // add user externalID
                                        if (uniqueRequireArray[i] == 'category') {obj.colour = $colourlookup.name(obj.item);} // add category colour
                                        if (angular.isDefined(results[j]['ts:category'])) {
                                            if (uniqueRequireArray[i] == 'budget') {obj.colour = $colourlookup.name(results[j]['ts:category']);} // add budget colour
                                            if (uniqueRequireArray[i] == 'task') {obj.colour = $colourlookup.name(results[j]['ts:category']);} // add task colour
                                        }
                                    }
                                    else {
                                        obj.entryTime += results[j]['ts:entryTime'];
                                    }
                                }
                                break;
                            }
                        }
                    }
                }
            }
        }
    }
}).error(function(data) {
        $debug.admin('Service: Failed getting report results for overview', 'error', true);
}).then(function(results) {
    return results;
});
return promise;

5 つの for ループを持つことがパフォーマンスにとって理想的であるとは思えません。特に、最上部の for ループは、30 から 200 項目の長さのサービスに供給される別の配列によって駆動されるためです。

約 1 分で、関数は正しいデータ バインディングを正常に作成し、フロントエンド リピーターにデータを入力し、CPU 使用率が低下します。その間だけ、アプリは完全に使用できなくなります。

どんな助けでも大歓迎です!

4

1 に答える 1

2

あなたのケースは、 http://danieltao.com/lazy.js/のようなものを使用するのに非常に適しているかもしれません。または、それがまだ使用できない場合は、少なくともhttp://underscorejs.org/ルートにアクセスしてください。

あなたが達成しようとしているものは、あなたが取っている反復的なアプローチよりも機能的なルートを使用して解決するほうがよいようです。なんで?

  1. より読みやすくなります。
  2. これらのライブラリは、専門家によって書かれています。彼らの専門知識を活用するのは良い考えかもしれません。
  3. あなたの要件は、より機能的で連鎖的なアプローチを求めています(すべてのループを参照してください)。

これを行っても、まだパフォーマンスの問題が発生している場合は、ng-repeat シーケンス全体を手書きのディレクティブに置き換えることをお勧めします。

この方向性に役立つ、すでにオンラインにあるものを調べたいと思うかもしれません。

http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/

于 2013-10-23T12:48:06.387 に答える