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绑定很快，但如果值变化很大，它可能会很慢。

我的重复插件是在这里获得性能的好方法。因为它重复绑定的元素而不是元素的内容，所以您将绑定到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 回答