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

JavaScript performance comparison

Revision 88 of this test case created by

Preparation code

<div style="position:relative; background:#ccc; width:100px; height:100px;overflow:hidden;">
<div id="elem" style=" position: absolute; background:red; width:200px; height:200px;">qwertyuiop
</div>
</div>
<div id="parent" style=" background:#ccc; width:100px; height:100px;overflow:auto;">
<div style=" background:red; width:200px; height:200px;">qwertyuiop
</div>
</div>
<script>
  var elem = document.getElementById("elem");
  var parent= document.getElementById("parent");
  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() * (-100);

};
</script>

Preparation code output

<div style="position:relative; background:#ccc; width:100px; height:100px;overflow:hidden;"> <div id="elem" style=" position: absolute; background:red; width:200px; height:200px;">qwertyuiop </div> </div> <div id="parent" style=" background:#ccc; width:100px; height:100px;overflow:auto;"> <div style=" background:red; width:200px; height:200px;">qwertyuiop </div> </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
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.1)";

// 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.1)";

// forces styles to be pushed through
var top = elem.offsetTop;
pending…
scroll
parent.scrollLeft = x*(-1);
parent.scrollTop = x*(-1);

// 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.

0 Comments

qwertyuiop
qwertyuiop