Question

在4.0版Knockout的现代化过程中（现在在monorepo tko生活），我遇到了一些性能问题。

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

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

Knockout Alpha2 - 349ms

Knockout Alpha3 (prerelease) - 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
更多中间小垃圾收集
针对ES6主义的原生优化

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

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

Answer 1

为了巩固任何答案，我作为维基开始了答案：

删除不合适的＆amp;使用template和if / ifnot / unless / with / else和foreach绑定进行不必要的依赖关系链接 - {{3 }}

优化Knockout / TKO - Alpha3

Knockout Alpha2 - 349ms

Knockout Alpha3 (prerelease) - 622ms

HTML：

使用Javascript：

1 个答案: