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个图层,如果你有移动的背景天空,移动速度较慢的背景山和一个角色),请使用多个画布.将画布一个放在另一个上,在底部画布上绘制天空,在第二个画布上绘制山峰并在顶部画布上绘制角色.这样,当顶部画布上的角色移动时,您不必重绘整个背景.

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