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

Revision 128 of this benchmark created by raina77ow on

Preparation HTML

<div id="cont" style="background:#ccc; width:100px; height:100px;overflow:auto;">
</div>

Setup

var elem = document.createElement('div');
    elem.id = 'elem';
    elem.style = 'position:absolute;height:1000px;width:50px;background-color:#FF0;';
    document.getElementById('cont').appendChild(elem);
    var xform = 'transform';
        ['webkit', 'Moz', 'O', 'ms'].every(function (prefix) {
            var e = prefix + 'Transform';
            if (typeof elem.style[e] !== 'undefined') {
                xform = e;
                return false;
            }
            return true;
        });

Teardown


    document.getElementById('cont').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
translateY
for (var i = 1; i <= 100; i++) {
  elem.style[xform] = 'translateY(' + (-i) + 'px) translateZ(0px)';
}
ready
Scroll left
for (var i = 1; i <= 100; i++) {
  elem.scrollTop = -i;
}
ready
Scroll using css top
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.