SVG与CANVAS（Snap.svg vs FabricJS）

Question

我做了一个速度来比较Snap.svg（SVG）和FabricJS（CANVAS）： http ：//jsbin.com/tadec/7 function dummy() 。

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

Fabricjs.com页面在这个例子中说拉斐尔需要225毫秒而Fabric需要97毫秒（解析：80，渲染：17）。

我有一个印象（在阅读fabricjs.com和paperjs.org之后 ），FabricJS和更常见的Canvas比SVG更快。

我的速度测试声称SVG明显快于Canvas（至少Snap.svg似乎比FabricJS快得多）。

为什么FabricJS在我的测试中如此之慢？ 相比之下，我是否犯了一些错误，因为我很惊讶在我的速度测试中SVG似乎比Canvas快。

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

Answer 1

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

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

此外，测量可能用于绘制画布，而不是与零件的交互。 正如你在评论中所说，渲染可能会有所改进，但为什么拖动一个形状会花费更长时间？ 因为：

1. 也许路径正在重新绘制每个重绘（不确定FabricJS如何工作）
2. 因为SVG只能重绘您正在移动的图像的某些部分，并且画布通常会完全重绘。 为什么？ 因为你无法“擦除”曾经是形状的画布的一部分。 因此整个画布被删除，并重新绘制新的位置。

为什么人们说这种情况下画布比SVG更快？ 因为如果你正确使用它。 这将是更多的工作，但它将更快地工作。

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

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