SVG 与 CANVAS（Snap.svg 与 FabricJS）

Question

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

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

Fabricjs.com 页面在 this example 中显示 Raphael 需要 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 提供了一种方法来做到这一点，但它不是最优的。一种解决方案是解析一次路径，然后一遍又一遍地使用相同的路径，而不是每次都解析它。

此外，测量值可能用于绘制画布，而不是用于与部件交互。正如你在 cmets 中所说，渲染可能会有所改善，但为什么拖动形状需要这么长时间？因为：

1. 可能在每次重绘时都会重新解析路径（不确定 FabricJS 是如何工作的）
2. 因为 SVG 只能重绘您正在移动的图像的某些部分，而画布通常会完全重绘。为什么？因为您不能“擦除”画布中曾经存在形状的部分。因此整个画布都被擦除了，并重新绘制了新的位置。

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

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

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