优化Knockout/TKO - Alpha3

Question

在现代化Knockout for 4.0版(现在在monorepo tko中)的过程中,我遇到了一些性能问题.

在其他更改中,一些内循环事物已转换为ES6类,并且它会导致一些主要的性能问题.我宁愿不撤消这种努力,因为它为一些关键代码增加了相当多的清晰度,所以我想征求一些关于如何改进ES6代码的意见.

我在这里设置了一些简单的样本进行分析:

敲除Alpha2 - 349ms

淘汰Alpha3(预发行) - 622ms

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
• 更多中间小垃圾收集
• ES6ism的原生优化程度较低

在任何情况下,我都没有根除这些问题,如果其中任何一个问题尚未解决 - 或者它们究竟发生在哪里.

我非常感谢您的见解,并帮助确定我们可以在哪些方面进行优化以使性能恢复到甚至高于平均水平.

Answer 1

为了整合所有答案，我以维基的形式开始了一个答案：

\n\n

\n
• 使用templateand if/ ifnot/ unless/ with/else和绑定删除不适当和不必要的依赖foreach链 \xe2\x80\x94 3074AA9
\n

\n