translate3d vs translate XY vs css left/top vs scrollleft (v127)

Revision 127 of this benchmark created on

Preparation HTML

<div style="background:#ccc; width:100px; height:100px;overflow:auto;">
<div id="elem" style="position:absolute;height:1000px;width:50px;background-color:#FF0;"></div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
translate3d
var elem = document.getElementById("elem");
for (var i = 1; i <= 100; i++) {
  elem.style.transform = 'translate3d(0,' + i + 'px,0)';
}
ready
Scroll left
var elem = document.getElementById("elem");
for (var i = 1; i <= 100; i++) {
  elem.scrollTop = -i;
}
ready
Scroll using css top
var elem = document.getElementById("elem");
for (var i = 1; i <= 100; i++) {
  elem.style.top = i;
}
ready

Revisions

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