javascript – SVG vs CANVAS(Snap.svg vs FabricJS)

我做了一个速度来比较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中的渲染速度要慢得多,为什么拖动速度呢？

解决方法:

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

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

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

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

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

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

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

标签：snap-svg,javascript,svg,canvas,fabricjs
来源： https://codeday.me/bug/20190825/1716887.html