translate3d vs translateXYZ vs left/top (v15)

Revision 15 of this benchmark created on

Preparation HTML

<style>
  #box{ position: relative; left: 20px; right: 20px; border: 1px solid red; width:
  500px; height: 400px; line-height: 20px; text-align: center; vertical-align: center;
  background: red; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; -webkit-perspective: 500}
</style>
<div id="box">
  <p>Shake Me!</p>
<img src="http://lorempixel.com/output/fashion-q-c-420-300-6.jpg"/>
</div>

Setup

var ua = navigator.userAgent;
    if (ua.match(/Chrome|Safari/))
       var styleName= 'webkitTransform';
    else if (ua.match(/Firefox/))
       var styleName= 'MozTransform';
    else if (ua.match(/Opera/))
       var styleName= 'OTransform';
    else if (ua.match(/MSIE 9/))
       var styleName= 'msTransform';
    var style = document.getElementById('box').style;
    var c=0; var counts=[0,0,0,0,0];
    var R=[];var len=100;var w=window.innerWidth; var step=w/len;
    var i=0; var y=0;
    for (i=0; i<len/2; i++) {
        y+=step;
        R.push(y);
    }
    for (; i<len; i++) {
        y-=step;
        R.push(y);
    }
    window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame       || 
                window.webkitRequestAnimationFrame || 
                window.mozRequestAnimationFrame    || 
                window.oRequestAnimationFrame      || 
                window.msRequestAnimationFrame     || 
                function( callback ){
                  window.setTimeout(callback, 1000 / 60);
                };
    })();

Test runner

Ready to run.

Testing in
TestOps/sec
translate3D
function draw() {
  var X = R[(c++)%len];
  style[styleName] = "translate3D(" + X + "px,-" + X + "px, 0)";
  counts[0]++;
}
function animate() {
  requestAnimFrame(animate);
  draw();
}
animate();
ready
translateXYZ
// async test
setTimeout(
  function() {
var X = R[(c++)%len];
style[styleName] = "translateX(" + X + "px) translateY(" + X + "px)  translateZ(0)";
counts[1]++;
deferred.resolve();
  },
  0
);
ready
TranslateXY
// async test
setTimeout(
  function() {
var X = R[(c++)%len];
style[styleName] = "translateX(" + X + "px) translateY(" + X + "px)";
counts[2]++;
deferred.resolve();
  },
  0
);
ready
Left / Top
// async test
setTimeout(
  function() {
var X = R[(c++)%len];
style.left= X + 'px';
style.top= X + 'px';
counts[3]++;
deferred.resolve();
  },
  0
);
ready
Left+Top
// async test
setTimeout(
  function() {
var X = R[(c++)%len];
style.cssText = 'left:' + X + 'px; top:' + X + 'px;';
counts[4]++;
deferred.resolve();
  },
  0
);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.