更改拉斐尔路径元素的正确方法是什么

Question

我尝试通过以下方式更改 Raphaël 路径元素（请注意代码中包含完整示例的构建内容）：

var n = 100,
    i = 0;
var values = [n];
var panel = document.createElement("div");
var paper = null;
var path = null;

panel.id = "panel";
panel.style.top = '0px';
panel.style.left = '0px';
panel.style.width = '300px';
panel.style.height = '300px';
panel.style.background = 'black';
document.getElementsByTagName('body')[0].appendChild(panel);

paper = Raphael(panel, 0, 0);

path = paper.path('m0,0');
path.attr({ stroke: '#fff', 'stroke-width': 1 });

function test () {
    i = n;

    while (i--)
        values[i] = Math.round(Math.random() * 3);

    // perform change here!
    path.attr({ path: 'm0,0l0,' + values.join('l3,') });

    // just a test case!
    setTimeout(test, 1);
};

test();

不幸的是，这种方法会导致内存泄漏。我已经在 FF 4 和 IE 7+ 以及 Raphaël 1.5.2 和 2.0 beta 中对其进行了测试。唯一的区别是 Raphaël 1.5.2 的泄漏速度比 2.0 beta 快得多。

我做错了什么？

---

更新

将此问题放在上下文中：我想用 Raphaël 实现“实时”图形控件。因此，我为每个系列使用一个数组缓冲区，并在达到缓冲区大小时渲染它们，因此我只需要渲染给定的固定长度系列。

我在 Raphaël 中看到做到这一点的唯一方法是每个系列的路径元素，它获取其路径属性的更新 .attr({path: path.attr('path') + getSvgPath(buffer)}) 如有必要，然后根据缓冲区大小在 x 轴上进行平移 .animate({translation: (bufferSize*valuesDistance*-1) + ',0'}, 500, '<', 回调） - 实现平滑的更新动画 - 最后在动画之后移动路径属性以防止路径字符串不断扩展： .attr({path: shiftSvgPath( path.attr('path'))})。

函数 shiftSvgPath() 和 getSvgPath() 只是返回适当的 svg 路径字符串。因此，结果始终由开头的一个 moveTo 命令和恒定数量的 lineTo 命令组成，这些命令要么等于显示值的数量，要么加上缓冲区大小。

Answer 1

我最近遇到了类似的问题。我不会称其为泄漏，而是绘制路径时 Raphael 的巨大内存消耗。我只是猜测它内部使用了一些缓存数组，消耗了大量内存。

我的方法是放弃 Raphael 并使用普通的旧 JavaScript 绘制 svg 元素。