Javascript 更快的SVG路径操作

因此，我想使用SVG制作一个绘图工具，我使用了一种相当简单的方法来更改路径的d属性：

$("div#drawarea").bind("mousemove", function(ev) {

  ev.preventDefault();

  ev.stopPropagation();

  var pX= (ev.pageX - this.offsetLeft);

  var pY= (ev.pageY - this.offsetTop);

  $path.attr("d", $path.attr("d") + " L" +pX+ "," + pY); //using jquery-svg here to change the d attribute

});

正如你所看到的，我是在mousemove函数中这样做的。代码可以工作，但当鼠标快速移动时，它会变得没有响应，当我希望它是平滑的直线时，它会创建许多直线。我认为这是因为我在mousemove事件上进行了大量的字符串连接（当点击保持很长时间，实际上是数千个字符长时，路径上的d属性会变得相当大）

我想知道是否有任何本机方法可以在路径末尾添加新值，而不是直接操作d属性。我查看了jQuerySVG源代码，该库似乎在内部也使用了朴素的字符串连接模式，因此使用它的方法不会带来任何好处

---

另外，我想知道是不是这样，或者浏览器只是限制了可以触发的mousemove事件的数量（每X毫秒一次），因此没有性能优化可以改善这一点。

使用这些方法。您必须编写更复杂的代码，但浏览器不必重新分析整个路径属性。例如，Firefox确实利用了这一点，很可能其他浏览器也利用了这一点。

如果有人问到更新SVG路径数据属性（对于实时应用程序）的最快方法是什么，我将对此进行一个小测试：

---

是的，将其设置为字符串意味着需要对其进行解析，DOM SVG接口则不是这样，但第一种方法的速度要快得多。Maybee该接口使用添加的每个点更新DOM，从而减慢整个过程。

您可以让“mousemove”处理程序简单地将点添加到数组中。然后，让另一个例程定期更新SVG，比如大约每四分之一秒更新一次，从点数组中重建“d”属性。@Pointy这会提高性能，但这是一种相当丑陋的方法（我遵循的理念是，如果您需要一个计时器来使用Javascript执行某些操作，那么您应该重新考虑您的操作方式）。我会等着看是否有其他答案，如果没有，我会按你的方式尝试。谢谢。问题是浏览器会触发很多这样的事件，并且对每个事件进行DOM更新会变得很慢。如果你不想使用轮询计时器，你可以让事件检查看看是否已安排更新，并安排一个更新。然后，SVG更新代码可以在运行后清除标志。我只是想顺便说一下，虽然这种方法工作得更好，但我最终使用了一个canvas标记。