Javascript SVG与画布（Snap.SVG与FabricJS）

我做了一个速度测试来比较Snap.svg（svg）和FabricJS（CANVAS）：

函数dummy（）

在Chrome中，SVG渲染时间为120毫秒，而CANVAS渲染时间为1100毫秒。SVG比CANVAS快9倍

Fabricjs.com页面上说Raphael需要225毫秒，Fabric需要97毫秒（解析：80，渲染：17）

我有一个印象（在读了fabricjs.com和之后），fabricjs和更一般的Canvas比SVG快

我的速度测试表明SVG比Canvas快得多（至少Snap.SVG似乎比FabricJS快得多）

为什么FabricJS在我的测试中这么慢？相比之下，我犯了一些错误，因为在我的速度测试中，SVG似乎比Canvas快，这让我感到惊讶

---

编辑：我的问题分为两个部分：为什么FabricJS中的渲染速度要慢得多，为什么拖动速度也慢得多？

在我看来，你的基准测试被打破了，因为除了测量图形到画布之外，你还一次又一次地测量包含路径的巨大字符串的解析。将此代码从循环中分离出来，您将获得更可靠的结果

为画布库提供的度量是为绘图提供的，而不是为解析或其他预处理工作提供的。如果您像使用SVG一样使用画布，那么是的，它会变慢。它不打算像SVG那样使用。FabricJS提供了一种实现这一点的方法，但它不是最优的。一种解决方案是只解析一次路径，然后反复使用相同的路径，而不是每次都解析它

此外，给出的测量值可能是为了绘制画布，而不是为了与零件交互。正如您在评论中所说的，渲染可能会得到改进，但为什么拖动形状需要更长的时间呢？因为：

可能每次重画时都会重新分析路径（不确定FabricJS是如何工作的）

因为SVG只能重绘正在移动的图像的某些部分，而画布通常是完全重绘的。为什么？因为你不能“擦除”画布上形状原来所在的部分。所以整个画布被擦除，新的位置被重新绘制

为什么人们会说在这种情况下，canvas比SVG快？因为如果你使用得当的话。这将是更多的工作，但它将工作得更快

不要将SVG路径用于绘制形状，或者使用简单路径并缓存它们

将经常使用的形状缓存到屏幕外（隐藏画布），然后在需要时从该画布复制到可见画布上

如果图像有多个独立层（例如游戏中的3层，如果背景天空在移动，背景山脉移动较慢，以及角色），请使用多个画布。把画布放在另一张画布上，在底部画布上画天空，在第二张画布上画山脉，在顶部画布上画人物。这样，当顶部画布上的角色移动时，您不必重新绘制整个背景

---

我希望我的回答对你有用：）

这个问题的答案解释了为什么它如此缓慢。我没有找到原因。原因是什么？如何？你能提供修复方法吗？我的问题分为两部分：分离字符串解析可以缩短“渲染”时间，但你是否尝试过将一个形状拖到其他形状上？在FabricJS中速度明显较慢。我还不知道，为什么它这么慢。为什么解析应该分开？如果所有形状都不同，则必须考虑解析。我没有很快发现这么多不同的形状。谢谢。我有点奇怪：“因为：路径解析”。当拖动某个对象时，FabricJS真的会解析字符串吗？这只是一个假设。我不知道是这样的。第二点是站得住脚的。在SVG中，每个形状/路径都有一个DOM对象。在画布中，没有路径或形状的概念。您不能影响单个形状。