优化Knockout /tko-Alpha3

Question

在更新版本4.0的淘汰赛的过程中(现在是monorepo tko)，我遇到了一些性能问题。

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

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

敲除Alpha2 -349

敲除Alpha3 (预释放) -622

jsFiddles中的代码如下所示，它是许多绑定所经历的减速的典型。

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：

• 使用if/ifnot/unless/with/else、template和foreach绑定删除不适当和不必要的依赖链- 3074AA9