6

一部のデータに対して SOAP 要求を実行し、ノックアウト ビューモデルに結果を入力する Web アプリがあります。現在、ノックアウト ビューモデルにプッシュする必要がある約 1000 のライン アイテムを取得しています。Chrome でページをプロファイリングすると、読み込み時間/CPU の大部分が knockout.js で費やされていることがわかります。すべてのアイテムが監視可能な配列にプッシュされるまで、ノックアウトの更新/処理を遅らせる方法があるかどうか、私は迷っています。

編集：より明確にするために、私は delaying やthrottlingのようなものを探していると思います。しかし、この回答から、各項目を監視可能な配列に直接プッシュするのではなく、通常の配列を作成してから監視可能な配列全体にデータを入力する方がよいようです。これにより、バインディングを遅延または調整する必要がなくなる可能性があります。推奨事項はありますか？

4

5 に答える 5

11

の内容を置き換えるだけであればobservableArray、配列をループする必要はありません。

最も効率的な操作は、単純に新しい値を設定することです。

this.obsArray(newData);
于 2013-02-08T16:46:10.470 に答える
7

これはおそらく最良のアプローチです。

function MyVM(){
    this.fooObsArray = ko.observableArray([]);
}

function Foo(){

var self = this;
self.vm = new MyVM();

this.pushSlow = function(arrayToBePushed){
    for (int i = 0; i < arrayToBePushed.length; i++){
        var element = arrayToBePushed[i];
        self.vm.fooObsArray.push(element);          //notifies ui foreach of elements => + delay
    }
}

this.pushFast = function(arrayToBePushed){
    var underlyingArray = self.vm.fooObsArray();

    for (int i = 0; i < arrayToBePushed.length; i++){
        var element = arrayToBePushed[i];
        underlyingArray.push(element);
    }

    self.vm.fooObsArray.valueHasMutated();          //notifies ui once all elements have been added => - delay
}
}
于 2013-09-22T05:00:50.970 に答える
5

ビュー モデルに約 850 のアイテムを取り込み、それらを選択して表示しています。ループのプッシュには約 15 秒かかり、直線的な劣化がありました。

ここで valueHasMutated ソリューションを使用しました: http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha.html

約 200 ミリ秒まで (全体 - サーバーへの往復、データベースの読み取りなどを含む)

于 2013-02-08T19:29:36.530 に答える
3

もちろん、他の回答で提案されているように、コードに変更を加えることができます。もう1つの方法は、Deferred Updatesプラグインを使用することです：https ：//github.com/mbest/knockout-deferred-updates

プラグインは、現在の「スレッド」ですべての変更が行われるまで、UI（または計算されたオブザーバブル）の更新を自動的に遅らせます。

于 2013-02-08T20:29:49.403 に答える
1

おそらく別の解決策は、配列から要素を20または50個のアイテムのチャンクで監視可能な配列に挿入することですか?

observablearray に項目を追加するので、追加するとノックアウトが表示されますが、各チャンク間に遅延を追加できるため、必要な CPU の量を減らすのに役立つ場合があります。

試してみる価値があるかもしれません。

于 2013-02-08T16:37:23.103 に答える