优化Knockout / TKO - Alpha3 [英] Optimizing Knockout / TKO - Alpha3
问题描述
为版本4.0的淘汰赛进行现代化改造（现在在monorepo tko ），我遇到了一些性能问题。
In the process of modernizing Knockout for version 4.0 (now live at the monorepo tko), I've hit some performance issues.
其他更改，一些内循环事物已转换为ES6类，并且它导致一些主要的性能问题。我宁愿不撤消这些努力，因为它为一些关键代码增加了一些清晰度，所以我想征求一些关于如何改进ES6代码的意见。
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:
jsFiddles中的代码如下所示，它是典型的经历了多次减速绑定。
The code in the jsFiddles is as follows, and it's prototypical of the slowdowns being experienced across a number of bindings.
<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：
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中的额外时间是叶子调用，使得它们更难识别，因此我根据配置文件比较推测问题是一些问题，包括：
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:
- 发生了一些非优化或去优化的事件
- 一些循环被较慢的本机调用取代，例如
Array.from - 更多中间小垃圾收集
- 减少ES6isms的原生优化
- 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:
- 删除不合适的&使用
模板和进行不必要的依赖链接，如果/if if/除非/与/否则和foreach绑定 - 3074AA9
- Remove inappropriate & unnecessary dependency chaining with
templateandif/ifnot/unless/with/elseandforeachbindings — 3074AA9
这篇关于优化Knockout / TKO - Alpha3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
