0

2 つの列を並べて表示する単一ビュー アプリケーションがあります。左側には注文のリストがあり、1 つをクリックすると、右側にその詳細が表示されます。数量を変更したり、詳細 (テキストフィールド) を追加したりできます。左側の列が影響を受けるたびにすぐに変更できます。

アプリは 1 つのメイン コントローラーと 1 つのサービスを使用しています。注文は $localStorage に保存され、ページを初期化するときにコントローラーによって $scope に渡されます。ビューは、左側の列で ng-repeat loop を使用し、右側で ng-show を使用します。すべての新しい注文は、外部サーバーからアプリにプッシュされます (コントローラーは、受信した更新ごとに $localStorage と $scope を更新します)。

問題は、注文のリストが大きくなったときに始まります。50 以上から顕著です。キーボード (テキストエリア) での入力は、$scope 内の注文が増えるほど遅くなります... 注文とフィルタリングがメモリを消費する可能性があることは理解していますが、これは私が期待すべきことですか、それとも私のアプローチが間違っているのでしょうか?

ビッグ データを処理する必要がある場合、アプリ ロジックをどのように分離しますか? (同時に 500 件以上の注文があるとしましょう)。

すべての入力、提案、およびあなたの助けを前もって感謝します...

4

1 に答える 1

1

ng-repeat は多くのウォッチを作成します。時計の数が多い = パフォーマンスが低い。ng-repeat リストへの即時バインディングはどれほど重要ですか? 少ない時計で ng-repeat が行うことを行うディレクティブを作成し、注文を保存したときにのみ更新することができます。

また、このライブラリをチェックしてください...たとえそれが役に立たなくても、あなたが何に遭遇しているかについての良い説明があり、おそらくそれを回避する方法を見つけることができます. https://github.com/Pasvaz/bindonce

注文を表示するために ng-show を使用しているとはどういう意味ですか? つまり、実際にはすべての注文の「詳細ビュー」に DOM を挿入してから、ng-show でそれらを表示するだけですか? それは別の大きな遅れになるからです。単一の「注文」パーシャル、おそらく「選択された」注文に双方向でバインドできる分離されたスコープを持つディレクティブが必要です。

コードなしで何が起こっているのかを正確に伝えるのはちょっと難しいですが、これが役立つことを願っています.

于 2013-09-25T15:45:51.310 に答える