我做了一个速度测试来比较 Snap.svg (SVG) 和 FabricJS (CANVAS):
http://jsbin.com/tadec/7 函数 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 中的渲染速度如此之慢，为什么拖动速度也如此？
最佳答案
在我看来，您的基准已被打破，因为除了测量绘制到 Canvas 之外，您还在测量对包含路径的巨大字符串的解析，一遍又一遍。将这段代码从循环中分离出来，您应该会得到更可靠的结果。
为 Canvas 库提供的测量是为绘图提供的，而不是为解析或其他预处理工作提供的。如果你像使用 SVG 一样使用 Canvas ，那么是的，它会更慢。它不打算像 SVG 那样使用。 FabricJS 提供了一种方法来做到这一点，但它不是最佳的。一种解决方案是解析一次路径，然后一遍又一遍地使用相同的路径，而不是每次都解析它。
此外，给出的测量值可能是为了绘制 Canvas ，而不是为了与部件交互。正如您在评论中所说，渲染可能会得到改善，但为什么拖动形状需要这么长时间？因为:
- 也许路径在每次重绘时都被重新解析(不确定 FabricJS 是如何工作的)
- 因为 SVG 只能重绘您正在移动的图像的某些部分，而 Canvas 通常会完全重绘。为什么？因为您不能“删除” Canvas 上曾经是形状的部分。所以整个 Canvas 都被删除，新的位置被重新绘制。
为什么人们说在这种情况下 canvas 比 SVG 更快？因为它是如果你正确使用它。这会增加工作量，但工作速度会快得多。
- 不要使用 SVG 路径绘制形状，或者使用简单路径并缓存它们
- 将您经常使用的形状缓存到屏幕外(隐藏 Canvas )，然后在需要时从该 Canvas 复制到可见 Canvas
- 如果您的图像有多个独立层(例如，游戏中有 3 个层，如果您有移动的背景天空、移动较慢的背景山脉和一个 Angular 色)，请使用多个 Canvas 。将一张 Canvas 放在另一张 Canvas 上，在底部 Canvas 上绘制天空，在第二张 Canvas 上绘制山脉，并在顶部 Canvas 上绘制人物。这样，当顶部 Canvas 上的 Angular 色移动时，您不必重新绘制整个背景。
希望我的回答对你有用:)
关于javascript - SVG 与 CANVAS(Snap.svg 与 FabricJS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21791388/