2012-03-29 7 views
42

knockout.jsに大きく依存する大きく複雑なページがあります。パフォーマンスが問題になり始めていますが、コールスタックを調べてボトルネックを見つけようとするのは本当の課題です。ノックアウトアプリケーションのパフォーマンスを調整する - レスポンスタイムを改善するためのガイドライン

私は受け入れ答えは、コメントがあることを別の質問(Knockout.js -- understanding foreach and with)に気づい:

を...と高性能が原因オーバーヘッドの 必要がある場合、私はwithを使用しないことをお勧め...

ステートメントが真であると仮定すると、これは実際に知っておくと便利なものであり、そのようなパフォーマンスのヒントのソースが見つかりませんでした。

したがって、私の質問は:

は、私は古典的なパフォーマンスチューニングに深く入る前に、私は自分のアプリケーションのパフォーマンスを助けるために適用することができますが、一般的なガイドライン/トップのヒントです。

+0

重要になって私が共有するためのヒントの数を持っていますしかし、時間はありません。今夜は投稿します。 –

+0

@RPNiemeyer - ありがとうライアン。それは素晴らしいだろう。 –

+1

一般的なヒントはありませんが、一般的なパフォーマンスが改善されたことを示すコメントとして、2.1のベータ版を試してみてください。 – ShaneBlake

答えて

37

私は1つの答えに念頭に置いてヒントをレイアウトするには多すぎると思います。

私はこのトピックについて一連のブログ投稿を開始しました。最初の投稿はhereです。

この投稿はif/with作業(コピーそのテンプレートととして子ども再レンダリング結合がトリガされるたびに、テンプレートを使用して)どのようにビットを説明し、これらのバインディングが原因となることができます方法について説明し、再レンダリングはるかに頻繁に予想以上。

今後の投稿でこの回答を更新します。私は(他の場所で議論見ていない)見つけた最大の落とし穴の

+4

優れたブログ記事、Ryan。 'if'バインディングの再レンダリングに関する提案を実装することは、すでに私のアプリケーションに大きな差をつけています。この問題に関する今後のブログ記事を楽しみにしています。 –

+2

[こちら](http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha。html)と[here](http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html)は、このトピックに関する最新の記事です。 – Sherlock

+0

こんにちは、投稿に感謝します。質問があります。私はajaxから観測可能な配列を取得していますが、パフォーマンスはテーブル上のデータをロードするために非常に遅いです。別の方法で私にお勧めできますか? – UserEsp

6

一つはノックアウトを変更する要素に結合要素たびどのに結合すべてのを再評価していることです。

これは通常大きな問題ではありませんが、高価な傾向のあるバインディング(例:template)の場合、パフォーマンスに大きな問題が発生する可能性があります。彼らは要素を拘束するものではないだけなら

は(containerless control flow syntax使用)仮想要素にコンテンツ/子供(templateforeachなど)をレンダリングするバインディングを添付します。

+1

このjsperfテストは、テンプレートバインディングのインダイレクションがどれほど高価であるかを示します。 http://jsperf.com/knockout-template-binding-performance/2 –

+0

RP Niemeyerはこの問題に関するブログ記事を作成しました:http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3- all-bindings.html –

+3

ノックアウト3.0は、この問題を偶然に修正します:http://blog.stevensanderson.com/2013/07/09/knockout-v2-3-0-released-v3-0-0-beta-available/ – Jonathan

0

あなたが重くObservableArraysマッピングを使用して起動すると、私はノックアウトマップknockout-map-vs-jquery-map

、マッピングはあまりにも、あなたがこのテストに従うとjquertマップを使用しての違いを見ることができます助けることができると思いますが

関連する問題