我有一个以分页格式显示数据表的应用程序。单击“页面”按钮可重新呈现表格。 (这些不是HTML页面 - 这些只是用数据的新“页面”重新填充我的表的按钮)每个表格单元都附加了事件处理程序。
对于所有意图和目的,如果应用程序在“第1页”上启动,我单击“第2页”,然后单击“第1页”,应用程序的状态应该与此相同起始条件。
到目前为止,非常好。
不幸的是,我注意到(在Chrome,Firefox等),点击不同的“页面”后,我的应用程序漏了内存。
为了找到它的原因,我点击了20个“页面”,然后设置应该是我用来为null的唯一全局控制器对象。
这对内存消耗的影响很小。
然后我尝试调用
document.body.remove();
果然,删除了body元素,让我没有HTML。
该应用程序仍然消耗20MB内存(Chrome)。
我很茫然。当我删除我的全局控制器对象时,应该没有更多的引用它。因为它也是唯一包含对我的数据的引用的地方,以及我的所有函数,所以应该释放内存。
当我拍摄快照时,我看到了:
构造函数 - 引用计数 - 大小
Object 95570 17.69MB
Array 126652 6.14MB
(closure) 72457 5.57MB
klass 57959 1.55MB
String 47461 1.26MB
Arguments 34780 1.06MB
HTMLTableCellElement 15146 709.19KB
HTMLInputElement 14624 685.48KB
(code) 3042 616.88KB
HTMLElement 10459 490.25KB
Variety 2027 132.48KB
HTMLTableRowElement 1242 57.44KB
(anonymous) 11 47.64KB
(global property) 1557 12.16KB
HTMLTableSectionElement 80 2.19KB
HTMLTableElement 41 1.90KB
RegExp 29 1.70KB
HTMLDivElement 46 1.26KB
Console 2 460B
Error 19 456B
d 18 360B
subclass 8 224B
MathConstructor 3 156B
绝大多数引用都是闭包(我在事件处理程序中使用了很多)。我该如何寻找内存泄漏?
答案 0 :(得分:0)
注意:你不删除任何内容,只删除文档树中的内容。被删除的节点(主体)仍然是一个DOM节点(例如将由Node-> removeChild()返回,我猜这是原型在remove()中使用的内容)
我认为没有删除节点的DOM方法。
也许你可以尝试别的东西来释放一些记忆,例如创建一个DOM-Range,选择Node(正文)并删除Range()的内容。
这一刻我没有想到另一种“合法”方法,在这种情况下我不建议使用innerHTML。
答案 1 :(得分:0)
我无法确定泄漏的来源 - 所以我的解决方案是,而不是在每个页面点击重新生成表的DOM +事件处理程序,我会更改表中元素的值,离开DOM没有动过。
故事的寓意,似乎是你应该非常小心生成DOM元素+事件处理程序的代码 - 并在它变得太复杂之前测试它是否泄漏。
答案 2 :(得分:0)
我使用drip来检测即内存泄漏