updateValue的敲门性能问题：'afterkeydown'

Question

我有一个搜索框和一个显示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毫秒限制，但不是更多：

当我在结果表中有100行时，在输入框中写东西时性能很糟糕。黄色= javascript是通过屋顶：

如果我删除valueUpdate: 'afterkeydown'没有性能问题，但我有，因为当用户按下时输入我正在使用event: { keypress: vm.keypress}触发搜索。

valueUpdate: 'afterkeydown'是否存在某些性能问题，或者由于我的代码中有其他问题，这种性能问题是否更有可能？

Answer 1

您可以使用“油门”扩展器来异步重新评估您的表格 详细信息为here。

Answer 2

部分问题与您results的更新方式有关。如果results中的更改很小，则foreach绑定非常快，但如果值发生很大变化，则可能会很慢。

我的Repeat plugin是获得表现的好方法。因为它重复绑定元素而不是元素的内容，所以您将绑定到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>