我注意到当我处于表单中时浏览器的内存开始增加(这在任务管理器中很明显)。在 IE 9 中,经过一些使用后,这很容易超过 500MB,而 chrome 更有弹性(使用相同的测试达到 200MB)。
我正在使用 chrome 开发者工具来调试这个问题。我注意到有大量的 Detached DOM 树:
我假设这可以确认存在内存泄漏。那是正确的吗? 其次,我需要找出如何确定问题的根本原因。我知道您应该使用保留树来确定是什么阻止了这些项目被回收。但是我找不到如何使用保留树。比如上面截图中的retaining tree是什么意思?
如有任何帮助,我们将不胜感激。
最佳答案
在编写引用 DOM 元素的代码时,需要牢记许多注意事项。但这基本上可以归结为几个简单的要点 -
一个。在您的本地函数中,始终清除引用
var menu = $('body #menu');
// do something with menu
.
.
.
menu = null;
永远不要将引用存储为元素数据的一部分 .data()
尽量不要在闭包/内联处理程序中使用 DOM 引用,而是传递标识符
function attachClick(){
var someDiv = $('#someDiv');
someDiv.click(function(){
var a = someDiv....;
//Wrong. Instead of doing this..
});
someDiv.click(function(){
var a = $('#someDiv');
//Pass the identifier/selector and then use it to find the element
});
var myFunc = function(){
var a = someDiv;
//using a variable from outside scope here - big DON'T!
}
}
是的,有人可能会争辩说搜索元素会减慢页面速度,但与性能命中巨大的堆导致 esp 相比,延迟非常小。在大型单页应用程序中。因此,只有在权衡利弊后才应使用#3。 (对我来说确实有很大帮助)
更新
避免匿名函数 - 命名您的事件处理程序和本地函数将在分析/查看堆快照时帮助您很多。
关于Javascript 内存泄漏 : Detached DOM tree,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16901759/