Geek asks and answers

SVG vs CANVAS (Snap.svg vs FabricJS)

I did a speedtest to compare Snap.svg (SVG) with FabricJS (CANVAS): http://jsbin.com/tadec/7 function dummy() .

On Chrome, SVG is displayed at 120 ms, and CANVAS at 1100 ms. SVG is 9 times faster than CANVAS.

On the Fabricjs.com page in this example , that Raphael takes 225 ms and Fabric takes 97 ms (parsing: 80, rendering: 17).

I got the impression (after reading fabricjs.com and paperjs.org ) that FabricJS and Canvas as a whole are faster than SVG.

My speed test claims that SVG is significantly faster than Canvas (at least Snap.svg seems much faster than FabricJS).

Why is FabricJS so slow in my test? I made some mistake in comparison because I am surprised that SVG seems to be faster than Canvas in my speed test.

EDIT: My question is two-part: why is the rendering speed in FabricJS so much slower and why is drag and drop too?

+3
source share
1 answer

Your test is broken, in my opinion, because in addition to measuring the picture on the canvas, you again and again measure the parsing of a huge line containing a path. Separate this code from the loop and you should get more reliable results.

, -, , . , SVG, , . SVG. FabricJS , . , , , .

, , , , . , , ? :

  • , ( , FabricJS)
  • SVG , , . ? "" , . , , .

, SVG ? , . , .

  • SVG-
  • , ( ),
  • (, 3 , , , , ), . , , . , , .

, :)

+6

More articles:


All Articles