【问题标题】:How to Identify A Memory Leak with Backbone.js如何使用 Backbone.js 识别内存泄漏
【发布时间】:2013-10-21 18:49:41
【问题描述】:

我相信我的 Backbone.js 应用程序中存在内存泄漏。在我将一些 Backbone.View 对象打印到控制台后,我得出了这一结论,只需单击一下,就可以看到 cid # 增加到数百个。

增加 cid# 是否是内存泄漏的明确迹象?是否有任何堆分析工具我可以看到创建的对象,例如使用 Java 语言?使用 Backbone.js 确保没有泄漏的最佳实践是什么?

谢谢!

【问题讨论】:

  • 在同一个包含元素中渲染新视图之前,您是否在视图上调用.remove()This post on "zombies" 可能值得一试以进行视图/事件清理。此外,对于 Chrome 中的堆分析:JS Console > Profiles.
  • 谢谢,僵尸帖子确实帮了大忙!

标签: javascript backbone.js memory-leaks


【解决方案1】:

最佳做法是使用listenTo 而不是onbind。删除实例时不要忘记stopListening

我建议使用 Chrome 分析器进行泄漏检测:https://developers.google.com/chrome-developer-tools/docs/javascript-memory-profiling

您也可以尝试使用 Chrome 插件来调试 Backbone 应用程序: https://github.com/Maluen/Backbone-Debugger 用于调试 Backbone 应用程序。

【讨论】:

  • 我支持 Chrome 分析器。它帮助我找到了一些令人毛骨悚然的 DOM,因为我在绑定侦听器时效率低下。
  • 实际上这是正确的答案 - 我可以通过 Chrome 的时间轴视图看到泄漏,但是在我的代码中使用 listenTo 而不是 on/bind 摆脱了它!谢谢!
【解决方案2】:

分析器是找出泄漏位置的唯一来源。但是有一种更简单的方法可以看到更大的图景。转到时间线,然后在 chrome 开发工具中进行内存。阅读图表要容易得多,并且会显示内存和 DOM 创建/销毁的峰值。

在您的应用程序尽可能最好地管理内存之前,您不必担心清理泄漏。用户会注意到内存峰值,因为应用程序会突突;他们不会注意到 99.9% 的泄漏。

您最好花时间学习如何在浏览器中管理内存。 Backbone 在管理内存方面做得不好。更好地使用内存:在 DOM 节点上使用对象池,在模型更改时更新 DOM 元素,尽可能多的将 javascript 保留在模板之外,只使用一次渲染函数,加载图像时要小心。有很多技巧。这是使您成为骨干应用程序性能的技术示例:https://github.com/puppybits/BackboneJS-PerfView

【讨论】:

  • 谢谢,时间线视图是我快速查看泄漏的最简单方法
猜你喜欢
  • 2013-03-19
  • 2011-03-28
  • 1970-01-01
  • 2011-03-21
  • 2012-11-27
  • 2015-02-11
  • 2019-08-19
  • 1970-01-01
相关资源
最近更新 更多