translate vs position left/top vs css margin left/top (v57)

Revision 57 of this benchmark created by Thomas Giles on

Preparation HTML

<div id="elem" style="position: absolute; background:#ccc; width:10px; height:10px;">
</div>
<script>
  var elem = document.getElementById("elem");
  var style = elem.style;
  var transform = (function() {
    if (undefined !== style.WebkitTransform) {
      return "WebkitTransform";
    } else if (undefined !== style.MozTransform) {
      return "MozTransform ";
    } else if (undefined !== style.OTransform) {
      return "OTransform";
    } else if (undefined !== style.msTransform) {
      return "msTransform ";
    } else if (undefined !== style.WebkitTransform) {
      return "WebkitTransform";
    } else {
      return "transform";
    }
  })();
</script>

Setup

var x = Math.random() * 10;

Test runner

Ready to run.

Testing in
TestOps/sec
translate
style[transform] = "translate(" + x + "px, " + x + "px)";

// forces styles to be pushed through
var top = elem.offsetTop;
ready
translate X/Y
style[transform] = "translateX(" + x + "px) translateY(" + x + "px)";

// forces styles to be pushed through
var top = elem.offsetTop;
ready
translateX/Y/Z
style[transform] = "translateX(" + x + "px) translateY(" + x + "px) translateZ(0)";

// forces styles to be pushed through
var top = elem.offsetTop;
ready
translate, translateZ
style[transform] = "translate(" + x + "px, " + x + "px) translateZ(0)";

// forces styles to be pushed through
var top = elem.offsetTop;
ready
translate3d
style[transform] = "translate3d(" + x + "px, " + x + "px, 0)";

// forces styles to be pushed through
var top = elem.offsetTop;
ready
position left/top
x += "px";
style.left = x;
style.top = x;

// forces styles to be pushed through
var top = elem.offsetTop;
ready
margin left/top
x += "px";
style.marginLeft = x;
style.marginTop = x;

// forces styles to be pushed through
var top = elem.offsetTop;
ready

Revisions

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