scale vs. translate3d

Benchmark created by Achraf Kassioui on

Preparation HTML

<div id="container" style="perspective: 100px; perspective-origin: 50% 50%; transition: transform 0.3s ease;">
  <div id="elem" style="width:600px; height:16000px; background:#ccc; transform-origin: 50% 50%; transition: transform 0.3s ease;"></div>
</div>

<script>
elem = document.getElementById("elem");
  function style(t){
    elem.style.transform = t;
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
scale
var t = '';
var x;

for (var i = 200; i--;) {
  x = i * 5;
  t = 'scale(' + x + ')';
  style(t);
}
ready
translate3d
var t = '';
var x;

for (var i = 200; i--;) {
  x = i * 5;
  t = 'translate3d(0px, 0px, ' + x + 'px)';
  style(t);
}
ready

Revisions

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

  • Revision 1: published by Achraf Kassioui on