raphael.js transform & animate performance testing

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<div id="canvas" style="width:300px;height:300px;"></div>
<script>
var paper = Raphael("canvas", 300, 300);
var f = paper.getFont("Times", 800);
var text, print, rect, circ, path;
var toggle = true, newTransform = "0,0";

     print = paper.print(0, 0, "hello world", f , 30);
     text = paper.text( 0, 0, "hello world" );
     rect = paper.rect( 0, 0, 100, 100 );
     circ = paper.circle( 0, 0, 10 );
     path = paper.path( "M10,20L30,40" );



</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
print
 
newTransform = toggle ? "t0,0" : "t100,100";
toggle = !toggle;
print.transform( newTransform );
 pending…
text
 
newTransform = toggle ? "t0,0" : "t100,100";
toggle = !toggle;
text.transform( newTransform );
 pending…
rect
 
newTransform = toggle ? "t0,0" : "t100,100";
toggle = !toggle;
rect.transform( newTransform );
 pending…
circle
 
newTransform = toggle ? "t0,0" : "t100,100";
toggle = !toggle;
circ.transform( newTransform );
 pending…
path
 
newTransform = toggle ? "t0,0" : "t100,100";
toggle = !toggle;
path.transform( newTransform );
 pending…
print animate
 
newTransform = toggle ? "t0,0" : "t100,100";
toggle = !toggle;
print.animate({ transform: newTransform }, 0 );
 pending…
text animate
 
newTransform = toggle ? "t0,0" : "t100,100";
toggle = !toggle;
text.animate({ transform: newTransform }, 0 );
 pending…
rect animate
 
newTransform = toggle ? "t0,0" : "t100,100";
toggle = !toggle;
rect.animate({ transform: newTransform }, 0 );
 pending…
circle animate
 
newTransform = toggle ? "t0,0" : "t100,100";
toggle = !toggle;
circ.animate({ transform: newTransform }, 0 );
 pending…
path animate
 
newTransform = toggle ? "t0,0" : "t100,100";
toggle = !toggle;
path.animate({ transform: newTransform }, 0 );
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment