SVG与画布(Snap.svg vs FabricJS)

Question

我做了一个快速测试来比较Snap.svg (SVG)和FabricJS (画布)：http://jsbin.com/tadec/7 function dummy()。

在Chrome中，渲染以120 ms为单位，而画布以1100 ms呈现。SVG比画布快9倍。

Fabricjs.com页面在这个例子中说，Raphael要225 ms，Fabric要97 ms (解析: 80，渲染: 17)。

我有一种印象(在阅读了fabricjs.com和paperjs.org之后)，FabricJS和更一般的画布比SVG更快。

我的速度测试声称SVG比画布快得多(至少Snap.svg似乎比FabricJS快得多)。

为什么FabricJS在我的测试中这么慢？我在比较中犯了什么错误，因为我很惊讶SVG在我的速度测试中似乎比画布更快。

编辑:我的问题是两个不同的:为什么渲染速度在FabricJS中要慢得多，为什么拖曳速度也是如此？

Answer 1

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

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

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

1. 可能每次重绘都会重新分析路径(不确定FabricJS是如何工作的)
2. 因为SVG只能重新绘制您正在移动的图像的某些部分，而画布通常是完全重新绘制的。为什么？因为你不能“抹去”画布的一部分，因为以前的形状是这样的。因此，整个画布被擦除，新的位置被重新绘制。

那么，为什么人们会说，对于这种场景，画布比SVG更快呢？因为如果你使用得当的话。这将是更多的工作，但它将工作得更快。

1. 不要使用SVG路径绘制形状，也不要使用简单路径并缓存它们
2. 将经常使用的形状缓存到屏幕外(隐藏的画布)，然后在需要时从该画布复制到可见的画布上。
3. 如果你有一个图像的多个独立层(例如，在一个游戏中有3层，如果你有正在移动的背景天空，移动速度较慢的背景山脉和一个字符)，请使用多个画布。把画布放在另一个上面，在底部的画布上画天空，在第二个画布上画山脉，在顶层画布上画人物。这样，当角色在顶部画布上移动时，您不必重新绘制整个背景。

我希望我的回答对你有用:)