translate3d vs translateXYZ vs left/top (v10)

Revision 10 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/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;

Test runner

Ready to run.

Testing in
TestOps/sec
translate3D
var X = Math.floor(Math.random() * 20);
style[styleName] = "translate3D(" + X + "px," + X + "px, 0)";
ready
translateXYZ
var X = Math.random() * 20;
style[styleName] = "translateX(" + X + "px) translateY(" + X + "px)  translateZ(0)";
ready
TranslateXY
var X = Math.random() * 20;
style[styleName] = "translateX(" + X + "px) translateY(" + X + "px)";
ready
Left / Top
var X = Math.floor(Math.random() * 20);
style.left= X + 'px';
style.top= X + 'px';
ready
Left+Top
var X = Math.floor(Math.random() * 20);
style.cssText = 'left:' + X + 'px; top:' + X + 'px;';
ready

Revisions

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