translate3d vs translateXYZ vs left/top (v13)

Revision 13 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; }
</style>
<div id="box">
  <p>
    Shake Me!
  </p>
  <img src="http://lorempixel.com/400/200/" />
</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 box = document.getElementById('box');
    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) {
        console.log('TIME OUT fallback');
        window.setTimeout(callback, 1000 / 60);
      };
    })();

Test runner

Ready to run.

Testing in
TestOps/sec
translate3D
// async test
function draw() {
  var X = R[(c++) % len];
  style[styleName] = "translate3D(" + X + "px,-" + X + "px, 0)";
}

function done() {
  deferred.resolve();
}
draw();
requestAnimFrame(done, box);
ready
translateXYZ
// async test
function draw() {
  var X = R[(c++) % len];
  style[styleName] = "translateX(" + X + "px) translateY(" + X + "px)  translateZ(0)";
}

function done() {
  deferred.resolve();
}
draw();
requestAnimFrame(done, box);
ready
TranslateXY
// async test
function draw() {
  var X = R[(c++) % len];
  style[styleName] = "translateX(" + X + "px) translateY(" + X + "px)";
  //counts[2]++;
}

function done() {
  deferred.resolve();
}
draw();
requestAnimFrame(done, box);
ready
Left / Top
// async test
function draw() {
  var X = R[(c++) % len];
  style.left = X + 'px';
  style.top = X + 'px';
  //counts[3]++;
}

function done() {
  deferred.resolve();
}
draw();
requestAnimFrame(done, box);
ready
Left+Top
// async test
function draw() {
  var X = R[(c++) % len];
  style.cssText = 'left:' + X + 'px; top:' + X + 'px;';
  //counts[4]++;
}

function done() {
  deferred.resolve();
}
draw();
requestAnimFrame(done, box);
ready

Revisions

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