调优Knockout应用程序-改进响应时间的指南

42

我有一个庞大而复杂的页面,严重依赖于knockout.js。性能开始成为一个问题,但是检查调用堆栈并尝试找到瓶颈是一项真正具有挑战性的任务。

我在另一个问题中注意到(Knockout.js -- understanding foreach and with),接受的答案有以下评论:

...因为开销大,我建议不要在需要高性能时使用with...

假设该语句是正确的,这是非常有用的信息,我没有找到这样的性能提示来源。

因此,我的问题是:

在深入进行经典性能调优之前,是否有可以应用的通用指南/顶级技巧来帮助提高应用程序的性能。


我有一些技巧要分享,但是现在没有时间。今晚会发布。 - RP Niemeyer
@RPNiemeyer - 谢谢Ryan。那太好了。 - Mark Robinson
1
我没有什么通用的建议,但你可能想尝试2.1的beta版,因为评论表明有一些普遍的性能改进。 - ShaneBlake
3个回答

37

我觉得把我脑海中的技巧都放在一个答案里可能有些过分。

我开始写这个主题的博客系列。第一篇博文在这里

这篇文章简要介绍了if / with如何工作(将子元素复制为其模板,并在每次绑定触发时重新呈现使用模板),并解释了这些绑定如何比预期更经常地引起重渲染。

我会在未来的博文中更新这个答案。


4
非常棒的博客文章,Ryan。实施关于“if”绑定重新渲染的建议已经对我的应用程序产生了可衡量的影响。期待在这个问题上未来的博客文章。 - Mark Robinson
2
这里和这里是关于这个主题的最新文章。 - Sherlock
你好,感谢您的帖子。我有一个问题。我正在从ajax中检索可观察数组,但是在加载数据到表格时性能非常慢。请问您能否推荐另一种方法? - UserEsp

6
我发现的最大陷阱之一(并未见其他地方讨论)是 Knockout 在元素上的任何一个绑定发生更改时都会重新评估该元素上每个绑定。这通常不是什么大问题,但对于开销较大的绑定(例如template),它可能会导致性能问题严重。
如果这些绑定不是元素上唯一的绑定,请使用虚拟元素(使用无容器控制流语法)来附加渲染内容/子项的绑定(如templateforeach等)。

1
这个jsperf测试展示了模板绑定的间接性有多昂贵。http://jsperf.com/knockout-template-binding-performance/2 - Michael R
RP Niemeyer发表了一篇关于这个问题的博客文章:http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html - Wet Noodles
3
顺便提一下,Knockout 3.0修复了这个问题:http://blog.stevensanderson.com/2013/07/09/knockout-v2-3-0-released-v3-0-0-beta-available/。 - Jonathan

0

我觉得映射也可以帮助你,你可以按照这个测试来看看使用jquert map和knockout map的区别knockout-map-vs-jquery-map

当你开始大量使用ObservableArrays时,映射变得至关重要。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接