knockout.js - Knockout 3.4.0 延迟更新和重新评估计数

Question

我正在将一个广泛依赖 Knockout.js 的复杂 Web 应用程序迁移到新的 3.4.0 版本，以便能够实现组件，并从新的 deferUpdates 选项提供的新性能改进中获益，方法是阅读 knockout 文件:

Using deferred updates ensures that computed observables and bindings are updated only after their dependencies are stable.

现在，令人惊讶的是，我遇到了这样的情况，即我的依赖可观察对象会像以前一样重新计算更多次，这会导致比以前更多的 UI 重绘。

这是 observableArrays 的经典优化示例，它在旧的 KO 版本和新的 3.4.0 没有打开 deferUpdates 的情况下只导致一次重新评估:

this.items = ko.observableArray();
this.addNewData = function() {
  var items = ko.utils.arrayMap(Items, function(item) {
    return new Item(item.name, item.priority);
  });
  //take advantage of push accepting variable arguments
  self.items.push.apply(self.items, items);
};
this.addNewData();

现在，通过设置:

ko.options.deferUpdates = true;

有两个重新评估，一个是在创建 observableArray 时:

this.items = ko.observableArray();

第二个是通过调用 addNewData() 提供数据。

fiddle :http://jsfiddle.net/kkrgjbsr/

相反，只是为了更详细地解释发生了什么，在 observableArray 初始化之后只会导致一次重新评估，因为这对我有好处:

this.items = ko.observableArray([
    new Item(Items[0]),
    new Item(Items[1]),
    ...and so on
]);

有人可以请解释一下如何保持 deferUpdates 的性能改进，因为我的应用程序中有一部分我绝对需要它，同时避免这些不必要的重新评估？

顺便说一句，有没有一种方法可以在整个应用程序中通过打开 deferUpdates 来跟踪重新计算计数会增加？

先谢谢大家

请注意:

• 我宁愿不使用 rateLimit 扩展程序，也不指定固定的时间段，因为我不确定这是否总是只提供一次重新评估。
• 我不希望使用 deferredUpdates 单独扩展每个单独的 observable，因为我有数百个，而且我无法准确预见代码会在哪里中断

Answer 1

好的，这就是我发现的:

ko.options.deferUpdates=true 仅在 View 模型初始化期间再创建一次重新评估。

要将数据传递给 observableArray 构造函数，只需使用实用函数 arrayMap - 没有麻烦:

this.items = ko.observableArray(ko.utils.arrayMap(Items, function(item) {
  return new Item(item.name, item.priority);
}));

在我的特殊情况下，增加重新计算计数的不良副作用很难识别，因为它只影响了 UI 重绘 - 而不是数据 - 并导致了意外的性能下降。

此外，我还使用新的 3.4.0 Knockout 版本测试了 rniemeyer 的 fiddle “重新评估计算的可观察量”，并打开了 deferUpdates - 即使“添加新的坏”按钮也只显示 1 个重新评估计数(抱歉，如果我测试了明显的) .

现在，我总是打开新选项 deferUpdates，因为这是一个出色且不可或缺的性能改进，并且不再需要旧 ​​KO 版本中所需的大部分优化 - 唯一烦人的是，在一些特殊的在某些情况下，必须删除其中一些优化。