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

JavaScript performance comparison

Revision 58 of this test case created by vamp

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: relative; background:#ccc; width:10px; height:10px;">
</div>
<script>
  var elem = document.getElementById("elem");
  var style = elem.style;
  var template = document.getElementById("elem").cloneNode();
  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 newElem = template.cloneNode();
    elem.parentNode.replaceChild(newElem, elem);
   
    elem = newElem;
    var style = newElem.style;
    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
!!elem.offsetTop;
pending…
translate X/Y
style[transform] = "translateX(" + x + "px) translateY(" + x + "px)";

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

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

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

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

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

// forces styles to be pushed through
!!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:

0 comments

Add a comment