Position set test

JavaScript performance comparison

Test case created by vamp and last updated

Preparation code

<style type="text/css">
#test { display: block; background-color: red; width: 20px; height: 20px; }
#area{ display: block; width: 150px; height: 150px; }
</style>
<dit id="area"><div id="test"></div></div>
<script type="text/javascript">
    var node = document.getElementById('test');

    function test(fn){
        return fn(clear(node));
    }

    function clear(node){
        node.removeAttribute('style');
        return node;
    }

    function suite1(node){
        node.style.position = 'relative';
        for(var style = node.style, i = 0; i < 100; i++){
            style.left = style.top = i + 'px';
        }
    }

    function suite2(node){
        for(var style = node.style, i = 0; i < 100; i++){
            style.marginLeft = style.marginTop = i + 'px';
        }
    }

    function suite3(node){
        for(var style = node.style, i = 0; i < 100; i++){
            style.cssText = 'position:relative;top:'+i+'px;left:'+i+'px;';
        }
    }

    function suite4(node){
        for(var style = node.style, i = 0; i < 100; i++){
            style.cssText='-webkit-transform:translate3d('+i+'px, '+i+'px,0)';
        }
    }

    function suite5(node){
        for(var style = node.style, i = 0; i < 100; i++){
            style.webkitTransform='translate('+i+'px, '+i+'px)';
        }
    }

    function suite6(node){
        for(var style = node.style, i = 0; i < 100; i++){
            style.webkitTransform='translate3d('+i+'px, '+i+'px,0)';
        }
    }
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
suite1
test(suite1);
pending…
suite2
test(suite2);
pending…
suite3
test(suite3);
pending…
suite4
test(suite4);
pending…
suite5
test(suite5);
pending…
suite6
test(suite6);
pending…

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

Compare results of other browsers

0 comments

Add a comment