为什么我的 svg 节点在 IE 中泄漏内存答案

【问题标题】：Why do my svg nodes leak memory in IE为什么我的 svg 节点在 IE 中泄漏内存
【发布时间】：2013-09-05 16:40:13
【问题描述】：

背景：受 this question 和 this question 关于 D3 内存使用的启发，我决定深入研究它的实际工作原理，并很快找到了 cautions about repeated add/remove of DOM nodes in IE。

为了与 D3 所做的其他事情隔离开来，我首先尝试了每秒添加/删除 1000 个圆圈的基本 SVG 案例：

var count = 1000;
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('width', '800');
svg.setAttribute('height', '800');
document.body.appendChild(svg);

function update() {
  // remove existing circles
  var circles = svg.querySelectorAll("circle")
  for (var i = circles.length - 1; i >= 0; i--) {
    var parent = circles[i].parentNode;
    if (parent) parent.removeChild(circles[i]);
  };

  // add new ones. Yes, would make more sense to update the x,y on the existing
  // circles but this is to show what happens in IE with lots of nodes being added/removed
  for (var j = count - 1; j >= 0; j--) {
    var node = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
    node.id = 'id' + Math.random();
    node.setAttributeNS(null, "cx", Math.random()*800);
    node.setAttributeNS(null, "cy", Math.random()*800);
    node.setAttributeNS(null, "r",  5);
    node.setAttributeNS(null, "fill", "blue");
    svg.appendChild(node);
  };
}

setInterval(update, 1000);

我发现这会在 IE9 和 IE10 中缓慢泄漏内存。现场版见这里：http://bl.ocks.org/explunit/6413259

我可以做些什么（如果有的话）来防止泄漏，这对如何编写针对 IE 的 D3 代码添加/删除大量节点有什么影响？

其他说明：

受this article 的启发，我尝试了一种简单的节点池方法，将移除的节点推入堆栈：

if (parent) circlePool.push( parent.removeChild(circles[i]) );

并在以后重复使用它们：

var node;
if (circlePool.length == 0) {
  node = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
} else {
  node = circlePool.pop();
  //TODO: clear out attributes of the node
}

但这并没有什么区别。

【问题讨论】：

标签： javascript internet-explorer memory-leaks svg d3.js

【解决方案1】：

到目前为止，我发现唯一有助于 IE 内存使用的方法是不为节点分配 ID，或者为它们分配在动画迭代中重复的 ID：

node.id = 'id' + j;

在此处查看实时版本：http://bl.ocks.org/explunit/6413371

我认为在删除 DOM 节点之前清空 ID 会做同样的事情，但这没有效果。

我不太喜欢这个答案，所以我希望其他人能更好地解释为什么节点池方法不起作用。

但是现在，对于使用 D3 的开发人员来说，故事的寓意是：如果您反复添加然后删除大量具有唯一 ID 的节点（例如，从 .ajax 调用中获取记录），那么您可能处于内存泄漏的危险。

【讨论】：