需要 Knockout ObservableArray 性能调整

Question

我希望提高我的敲除 table 绑定的性能。我目前的解决方案工作得非常快，但我更担心浏览器的开销，因为网络应用程序是运行在 iGel linux 终端上使用随 OS 安装的 FireFox。终端资源有限，此 Web 应用处于 24x7 生产环境中。

// View Model
self.trMachineData = ko.observableArray([]);
self.machinedata = function () {
  return {
    MachineData_Machine: ko.observable(''),
    MachineData_ProcessDate: ko.observable(''),
    MachineData_Description: ko.observable('')
  };
};

// Page Interactions
for (var i = 0; i < data.d.DisplayData.length; i++) {
  var trd = new vm.machinedata();
  trd.MachineData_Machine(data.d.DisplayData[i].Machine);
  trd.MachineData_ProcessDate(data.d.DisplayData[i].ProcessDate);
  trd.MachineData_Description(data.d.DisplayData[i].Description);
  vm.trMachineData.push(trd);
}

// HTML
<table>
  <tr>
    <td>Machine</td>
    <td>Date</td>
    <td>Description</td>
  </tr>
  <tbody data-bind="foreach: trMachineData">
    <tr>
      <td data-bind="text: MachineData_Machine"></td>
      <td data-bind="text: MachineData_ProcessDate"></td>
      <td data-bind="text: MachineData_Description"></td>
    </tr>
  </tbody>
</table>

Answer 1

看起来你根本不需要这三个项目是可观察的，你可以将它们一起存储在一个对象中。此外，您可以直接更新您的可观察数组：

const tmpData = [] ;
for (var i = 0; i < data.d.DisplayData.length; i++) {
  var trd = {};
  trd.MachineData_Machine = data.d.DisplayData[i].Machine;
  trd.MachineData_ProcessDate = data.d.DisplayData[i].ProcessDate;
  trd.MachineData_Description = data.d.DisplayData[i].Description;
  tmpData.push(trd);
}
vm.trMachineData(data)

然后在你的 table:

<table>
  <tr>
    <td>Machine</td>
    <td>Date</td>
    <td>Description</td>
  </tr>
  <tbody data-bind="foreach: trMachineData">
    <tr>
      <td data-bind="text: MachineData_Machine"></td>
      <td data-bind="text: MachineData_ProcessDate"></td>
      <td data-bind="text: MachineData_Description"></td>
    </tr>
  </tbody>
</table>

需要 Knockout ObservableArray 性能调整

Knockout ObservableArray Performance Tweak Needed

arrays

performance

observable

knockout.js