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

JavaScript performance comparison

Revision 58 of this test case created by vamp

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

<div id="elem" style="position: relative; background:#ccc; width:10px; height:10px;"> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
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.

0 Comments