javascript - 优化击倒/TKO - Alpha3

Question

现代化进程中Knockout对于 4.0 版(现在位于 monorepo tko )，我遇到了一些性能问题。

在其他变化中，一些内部循环的东西已经转换为 ES6 类，这导致了一些主要的性能问题。我不想撤销这项工作，因为它为一些关键代码增加了相当多的清晰度，所以我想征求一些关于如何改进 ES6 代码的意见。

我在这里设置了一些用于分析的简单示例:

Knockout Alpha2 - 349 毫秒

Knockout Alpha3 (prerelease) - 622 毫秒

jsFiddles 中的代码如下，它是许多绑定(bind)所经历的减速的原型(prototype)。

HTML:

<div id='x'>
  <strong>{{ count }} / {{ time }} ms</strong>
  <custom-component></custom-component>
</div>

<div id='cc-template'>
   cc
   {{# unless: finished }}
      <custom-component></custom-component>
   {{ /unless }}
</div>

Javascript:

let count = ko.observable(0)
let time = ko.observable(false)
const start = performance.now()
const ITERATIONS = 1000

class viewModel {
  constructor () {
    this.finished = count() > ITERATIONS
    count(count() + 1)
    time(performance.now() - start)
  }
}

ko.components.register("custom-component", {
  viewModel, template: {element: 'cc-template'}
})

ko.applyBindings({count, time}, document.getElementById('x'))

如果比较 Javascript 配置文件，调用树几乎相同(尽管 ES6 发生了变化)。看起来 Alpha3 中的额外时间是在叶调用上，这使得它们更难识别，所以我根据配置文件比较推测问题有几个方面，包括:

• 一些非优化或反优化的情况
• 一些循环替换为较慢的本地调用，例如Array.from
• 更多的中间小垃圾回收
• 对 ES6isms 的原生优化较少

无论如何，我还没有找出问题所在(如果有的话)——或者它们可能发生的确切位置。

我将非常感谢您提供见解并帮助确定我们可以在哪些方面进行优化以使性能恢复到甚至高于标准水平。

Answer 1

为了整合任何答案，我已经开始将答案作为 wiki:

• 使用 template 和 if/ifnot/unless/with 移除不合适和不必要的依赖链/else 和 foreach 绑定(bind) — 3074AA9