1

検索ボックスと、0 ～ 100 の結果行を表示するテーブルがあります。

<input type="text" data-bind="value: vm.query,
                              valueUpdate: 'afterkeydown',
                              event: { keypress: vm.keypress} ">

<table>
  <tbody data-bind="foreach: results">
    <tr>
      <td> <p data-bind="text: property1"></p> </td>
      <td> <p data-bind="text: property2"></p> </td>
      ...

結果テーブルに 10 行しかない場合でも、入力ボックスに書き込みを行うとパフォーマンスが向上します。黄色 = JavaScript が 16 ミリ秒の制限に達していますが、それ以上ではありません: クローム タイムライン 1

結果テーブルに 100 行あると、入力ボックスに何かを書き込むときにパフォーマンスが低下します。黄色 = JavaScript が屋根を突き破っています: クローム タイムライン 2

を削除してvalueUpdate: 'afterkeydown'もパフォーマンスの問題はありませんが、ユーザーが押すenterと を使用して検索が開始されるため、問題はありますevent: { keypress: vm.keypress}。

パフォーマンスの問題がありvalueUpdate: 'afterkeydown'ますか、それともコード内の他の何かが原因でこのパフォーマンスの問題が発生する可能性が高いですか?

4

2 に答える 2

4

「スロットル」エクステンダーを使用して、テーブルを非同期的に再評価できます。
詳細はこちら。

于 2013-07-25T14:00:48.473 に答える
2

results問題の一部は、更新方法に関連しています。の変更resultsが小さい場合、foreachバインディングは非常に高速ですが、値が大幅に変更された場合、バインディングは非常に遅くなる可能性があります。

私のRepeat プラグインは、ここでパフォーマンスを向上させる良い方法です。要素のコンテンツではなく、バインドされた要素を繰り返すため、 のtr代わりに にバインドしtbodyます。

<table>
  <tbody>
    <tr data-bind="repeat: results">
      <td> <p data-bind="text: $item().property1"></p> </td>
      <td> <p data-bind="text: $item().property2"></p> </td>
于 2013-07-25T20:32:31.983 に答える