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

Revision 126 of this benchmark created by TakuyaMotoshima 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

Revisions

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