私の質問は、何百もの動的な JS 要素を含むページでパフォーマンスにアプローチする方法についてです。
700 の食品をロードするページがあります。各食品アイテムには、測定値 (例: パン vs パン) を選択できる選択ボックス、値スライダー、および選択された値 * 測定値の重量を示す出力があります。各アイテムには「お気に入り」チェックボックスもあります。これがチェックされている場合、アイテムは「お気に入り」リストにコピーされます。「お気に入り」リストのアイテムの値入力は、下の元の食品アイテムに「ミラーリング」されるため、「お気に入り」スライダーを動かすと、元のアイテムのスライダーも同時に動かされます。
これが私が言いたいことのテキストスケッチです：
//Favourites
(*) Bread (slice/loaf) (slider) [output]
//Food items
(*) Bread (slice/loaf) (slider) [output]
() Potatoes (mashed/boiled/fries) (slider) [output]
これらすべてを JQueryUI スライダーとさまざまな JQuery を使用して実装し、選択ボックスとチェックボックスの値を監視しました。当然のことながら、これらの 700 個が読み込まれると、DOM はドアネイルとして機能しなくなります。より良い解決策が必要です。
代わりに AngularJS でこの動作をすべて実装すると、パフォーマンスが向上する可能性はありますか?