SVG VS帆布（Snap.svg VS FabricJS）

Question

我做了一个SPEEDTEST到Snap.svg（SVG）比较FabricJS（帆布）： 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在速度测试中似乎比帆布快。

编辑：我的问题是两部分：为什么渲染速度在FabricJS中速度如此之慢以及为什么还要拖动速度？

Answer 1

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

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

此外，测量可能是绘制一个画布，而不是与零件相互作用。正如你在评论中所说的那样，渲染可能会得到改善，但为什么拖动一个形状需要更长的时间？因为：

1. 也许路径上每个被重绘（不知道FabricJS是如何工作的）重新分析
2. 因为SVG可以重绘要移动图像的某些部分，帆布通常是完全重新绘制。为什么？因为你无法“抹去”曾经是形状的部分画布。所以整个画布都被擦掉了，新的位置被重新绘制。

那么为什么人们说canvas对于这样的场景比SVG快呢？因为它是如果你正确使用它。这将是更多的工作，但它会更快地工作。

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

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