优化 Knockout / TKO - Alpha3答案

【问题标题】：Optimizing Knockout / TKO - Alpha3优化 Knockout / TKO - Alpha3
【发布时间】：2017-11-08 22:03:53
【问题描述】：

在更新 Knockout 4.0 版的过程中（现在位于 monorepo tko），我遇到了一些性能问题。

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

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

Knockout Alpha2 - 349 毫秒

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
更多中间次要垃圾回收
减少对 ES6isms 的原生优化

在任何情况下，我都没有找出问题所在（如果有的话）——或者问题可能发生在哪里。

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

【问题讨论】：

标签： javascript performance optimization knockout.js

【解决方案1】：

为了整合任何答案，我已经开始以 wiki 的形式回答：

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

【讨论】：