translate vs position left/top vs css margin left/top

JavaScript performance comparison

Revision 63 of this test case created

Info

I have added the 3d variants to the code snippets, as well as forcing the browser to actually update the styles, reading the ".offsetTop" property.

The problem with this jsperf is that it really only tests the JavaScript side of things, and only at the point of execution. Things like translate3d would perform better over a longer period of time, as the task is off-loaded onto the GPU in most cases. Unfortunately, this performance cannot be properly measured by jsperf.

Preparation code

<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>
<script>
Benchmark.prototype.setup = function() {
    var x = Math.random() * 10;
};
</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
translate
style[transform] = "translate(" + x + "px, " + x + "px)";

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

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

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

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

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

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

// forces styles to be pushed through
var top = elem.offsetTop;
pending…
translate3d with Z not zero
style[transform] = "translate3d(" + x + "px, " + x + "px, 0.1px)";

// forces styles to be pushed through
var top = elem.offsetTop;
pending…
translate x/y/z with z not zero
style[transform] = "translateX(" + x + "px) translateY(" + x + "px) translateZ(0.1px)";

// forces styles to be pushed through
var top = elem.offsetTop;
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:

1 comment

svnsson commented :

The "not zero" tests wasn't working correctly in rev. 62 because of the lack of px suffix at 0.1. The transform property was ignored.

Add a comment