27

これがフィドルです：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秒かかります。

今回はAngularjsで大丈夫ですか？2秒の原因となった私が間違っていることはありますか？レンダリング（2000要素は私には大きな数字ではないように見えますが、2秒は確かに大きいため）？

4

8 に答える 8

4

このプロジェクト: angular-vs-repeatを使用すると、パフォーマンスが向上します。

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

于 2014-05-27T11:36:06.430 に答える
4

これは、AngularJS がダーティ チェックを行う方法によるものです。AngularJS でレンダリングが遅くなることに対する決定的な答えは次のとおりです。

于 2013-03-03T16:36:03.693 に答える
1

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

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

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

ワンタイムバインディング経由でウォッチャーを減らすことも状況に役立ちますが、主な問題は角度のあるフォームの検証::にあると思います。ng-model

于 2016-10-31T18:57:35.357 に答える