淘汰应用程序的性能调整 - 改进响应时间的指南

Posted 2023-02-22

【中文标题】淘汰应用程序的性能调整 - 改进响应时间的指南

【英文标题】：Performance tuning a knockout application - guidelines for improving response times

【发布时间】：2012-04-13 04:59:54

【问题描述】：

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

我在另一个问题（Knockout.js -- understanding foreach and with）中注意到接受的答案有评论：

...我建议不要在需要高性能的地方使用with 因为开销...

假设该陈述属实，这是非常有用的知识，我还没有找到此类性能提示的来源。

因此，我的问题是：

在我深入进行经典性能调优之前，是否有可以应用的一般准则/重要提示来帮助提高我的应用程序的性能。

【问题讨论】：

我有许多技巧要分享，但没有时间。今晚会发布。

@RPNiemeyer - 谢谢瑞恩。那太好了。

我没有任何一般性提示，但您可能想尝试 2.1 的测试版，因为 cmets 表明有一些一般性的性能改进。

【参考方案1】：

我认为将我想到的提示布局在一个答案中太过分了。

我开始了一系列关于这个主题的博客文章。第一个帖子是here。

这篇文章描述了if/with 的工作原理（将子级复制为其模板，并在触发绑定时使用模板重新渲染）并解释这些绑定如何导致重新渲染比预期更频繁。

我会在以后的帖子中更新这个答案。

【讨论】：

优秀的博文，瑞恩。实施有关“if”绑定重新渲染的建议已经对我的应用程序产生了可衡量的影响。期待未来有关此问题的博文。

Here 和 here 是关于此主题的最新帖子。

您好，感谢您的帖子。我有个问题。我正在从 ajax 检索一个可观察的数组，但是在表上加载数据时性能太慢了。你能推荐我另一种方式吗？。

【参考方案2】：

我发现（并且在其他地方没有讨论过）的最大问题之一是，每当 any 绑定时，Knockout 都会重新评估元素上的 every 绑定关于元素的变化。

这通常没什么大不了的，但对于往往很昂贵的绑定（例如template），它可能会产生严重的性能问题。

将呈现内容/子项（template、foreach 等）的绑定附加到虚拟元素（使用 containerless control flow syntax），如果它们不是元素上的唯一绑定。

【讨论】：

这个 jsperf 测试显示了模板绑定的间接成本是多么昂贵。 jsperf.com/knockout-template-binding-performance/2

RP Niemeyer 就这个问题发表了一篇博文：knockmeout.net/2012/06/…

Knockout 3.0 修复了这个问题，顺便说一句：blog.stevensanderson.com/2013/07/09/…

【参考方案3】：

我认为映射也可以提供帮助，您可以按照此测试查看使用 jquert map 和 knout map knockout-map-vs-jquery-map 之间的区别

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