需要淘汰 ObservableArray 性能调整答案

【问题标题】：Knockout ObservableArray Performance Tweak Needed需要淘汰 ObservableArray 性能调整
【发布时间】：2019-12-14 10:08:31
【问题描述】：

我希望提高我的淘汰赛表绑定的性能。我当前的解决方案运行得非常快，但我更担心浏览器的开销，因为 Web 应用程序在 iGel linux 终端上运行，该终端使用操作系统随附的 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>

【问题讨论】：

您的 MachineData_Machine observables 是独立更改还是同时更新？
同时进行。扫描条码，Web 应用程序显示机器过程数据，供检查员查看，以便正确处置物品。
Can I speed up knockout when populating a large observable array?的可能重复

标签： arrays performance knockout.js observable

【解决方案1】：

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

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>
  <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>

【讨论】：