web-dev-qa-db-ja.com

AngularJSは、約2000個の要素のレンダリングが本当に遅いですか？

ここにフィドルがあります： http://jsfiddle.net/D5h7H/7/

以下をレンダリングします。

<div ng-repeat="group in Model.Groups">
    <span>{{group.Name}}</span>
    <div ng-repeat="filter in group.Filters">
        <input type="checkbox" ng-model="filter.enabled">{{filter.Name}}
        <select ng-disabled="!filter.enabled">
            <option ng-repeat="value in filter.Values">{{value}}</option>
        </select>
    </div>
</div>

サーバーからjsonにロードされ、ユーザーにレンダリングされるフィルターのリストです（例では、jsonはFiddleで生成されます）。現時点では、30個のフィルターの6つのグループがあり、各フィルターには15個のオプション要素があります。

Firefoxでは、UIの再描画に約2秒かかります。

angular js？2秒のレンダリングを引き起こした間違ったことを何かしているのですか？大きい）？

javascriptangularjsperformancepageloadng-bind
24
Shaddix

AngularJS 1.3以降では、 One-time binding ビルトイン：

ワンタイムバインディング式の主な目的は、登録が解除され、バインディングが安定するとリソースを解放するバインディングを作成する方法を提供することです。監視される式の数を減らすと、ダイジェストループが高速になり、同時により多くの情報を表示できます。

ワンタイムバインディングを作成するには、::をバインディング値に：

<div>{{::name}}</div>

関連するディスカッションも参照してください。

27
alecxe

データがバインドされた後にUIを更新する必要がない場合は、 bindonce を確認する必要があります。 bindonce は、オブジェクトがロードされるまで待機してから、バインディングを実行することもできます。たくさんの時間を節約し、正しく使用すると$watch() esを劇的に減らします。

15
fidian

このプロジェクトの使用： angular-vs-repeat はパフォーマンスを向上させます。

これにより、ブラウザは要素をレンダリングするスクロール可能なコンテナに収まる非常に多くの要素のみにレンダリングします（したがってangularはダーティチェックを行います）。Demo here

4
kamilkp

これは、AngularJSがダーティチェックを行う方法が原因です。以下は、AngularJSでレンダリングを遅くするための 決定的な答え です。

4
Stewie

約2000個のアイテムをロードするため、一度にすべてをレンダリングする必要はありません。ページをスクロールするとき、またはページを変更するときに積極的にレンダリングできます。これを参照してください question

Ng-repeatがすべてのdomを作成する時間を最小限に抑えるには、フィルターIDなどの一意のIDを使用します。 tracking-and-duplicates を参照してください

上記のalecxeの答え として、1回限りの境界を使用します。それが適切でない場合は、そのようなng-model-options="{ debounce: 200 } angular オプション設定

最後に、パフォーマンスアナライザーツールを使用して、アプリケーションのボトルネックを追跡し、修正する必要があります。

お役に立てれば。

ng-repeat="filter in group.Filters | track by:filter.id | limitTo: NumPerOperation"
1
Kris Roofe

これは古い質問ですが、答えがまだ投稿されていないと思います。

フォームが遅い理由は、2,000以上の要素があるだけでなく、それらの要素がng-modelを使用するフォーム要素であるためだと思います。 Angular=の組み込みフォーム検証は非常に強力で便利ですが、特にフォームを最初にロードするときは非常にゆっくりと動作します。これらの180（6x30）入力要素がng-checkedフォーム検証メカニズムを回避するng-modelの代わりに、フォームのロードがはるかに高速になります。

<input type="checkbox" ng-checked="filter.enabled">{{filter.Name}}

::を介したワンタイムバインディングでウォッチャーを減らすことも状況を改善しますが、主な問題はng-modelとangularフォーム検証にあると思います。

1
Stephen Marsh

これらの2つのangular=モジュールを使用すると、テーブルのレンダリングをより高速にすることができます。

"quick-ng-repeat" https://github.com/allaud/quick-ng-repeat

「無限スクロール」 https://github.com/infinite-scroll/infinite-scroll

これは「ng-repeat」のパフォーマンスを改善するソリューションではないことに注意してください。これは、テーブルを高速化するための異なるアプローチです。

0
Thiago C. S Ventura