优化淘汰赛/TKO - Alpha3 [英] Optimizing Knockout / TKO - Alpha3

问题描述

正在对 4.0 版的 Knockout 进行现代化改造(现在在 monorepo tko)，我遇到了一些性能问题.

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

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

淘汰赛 2 - 349 毫秒

淘汰赛 Alpha3(预发布) - 622 毫秒

jsFiddles 中的代码如下，它是在许多绑定中遇到的减速的原型.

HTML:

<strong>{{ count }}/{{ time }} ms</strong><自定义组件></自定义组件>
<div id='cc-template'>抄送{{# 除非:完成}}<自定义组件></自定义组件>{{/除非 }}

Javascript:

let count = ko.observable(0)让时间 = ko.observable(false)const start = performance.now()常量迭代 = 1000类视图模型{构造函数(){this.finished = count() >迭代次数计数(计数()+ 1)时间(性能.现在() - 开始)}}ko.components.register("自定义组件", {视图模型，模板:{元素:'cc-模板'}})ko.applyBindings({count, time}, document.getElementById('x'))

如果比较 Javascript 配置文件，调用树几乎相同(尽管例如 ES6 发生了变化).看起来 Alpha3 中的额外时间是在叶子调用上，使它们更难识别，因此我根据配置文件比较推测问题出在几倍上，包括:

• 发生一些非优化或去优化
• 一些循环替换为较慢的本地调用，例如Array.from
• 更多中间次要垃圾收集
• 对 ES6isms 的原生优化较少

无论如何，我还没有找出问题所在，如果其中有任何一个，或者它们可能发生在哪里.

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

解决方案

为了整合所有答案，我已经开始了一个 wiki 答案:

• 删除不适当的 &template 和 if/ifnot/unless/with/<代码>else 和 foreach 绑定——3074AA9

In the process of modernizing Knockout for version 4.0 (now live at the monorepo tko), I've hit some performance issues.

Among other changes, some inner-loop things have been converted to ES6 classes, and it's causing some major performance problems. I'd rather not undo that effort as it adds quite a bit of clarity to some key code, so I'd like to solicit some input on how to improve the ES6 code.

I've set up some simple samples for profiling here:

Knockout Alpha2 - 349ms

Knockout Alpha3 (prerelease) - 622ms

The code in the jsFiddles is as follows, and it's prototypical of the slowdowns being experienced across a number of bindings.

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'))

If you compare the Javascript profiles, the call trees are nearly identical (notwithstanding e.g. the ES6 changes). It looks like the extra time in Alpha3 is at the leaf calls, making them harder to identify, so I speculate based on the profile comparisons that the problem is a few fold, including:

• some non-optimizing or de-optimizing happening
• some loops replaced with slower, native calls e.g. Array.from
• more intermediate minor garbage collections
• less native optimization for ES6isms

In any case I haven't rooted out which, if any of these, is the problem yet – or where exactly they might be occurring.

I would be most grateful for insights and help identifying where we can make optimizations to get the performance back up to, or even above, par.

解决方案

To consolidate any answers, I've started an answer as a wiki:

• Remove inappropriate & unnecessary dependency chaining with template and if/ifnot/unless/with/else and foreach bindings — 3074AA9

这篇关于优化淘汰赛/TKO - Alpha3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！