loop assignment using this and logging (v3)

Revision 3 of this benchmark created by Brandon on

Description

Added in some DOM manipulation to simulate more realistic or complex loops.

THE DOM SELECTOR IS IN THE TESTS TO SLOW THEM DOWN & simulate additional complexity.

The point of this is to see how the 1 change in the for statement effects the same exact slow code executed in the loop.

Preparation HTML

<script>
    //allow errors to happen to handle jsperf crash on input types...
    //hack which we shouldnt need
    window.onerror=function(){return true;}
</script>
<style>
    .myBox{
        background:rgb(0,0,0);
        width:200px;
        height:200px;
    }
</style>
<ul class='myBox'></ul>

Setup

this.a=new Array(255);
    for(var i=0;i<this.a.length;i++){
        this.a[i]=i;
    }

Teardown


    document.querySelector('.myBox').style.background='rgb(0,0,0)';

Test runner

Ready to run.

Testing in
TestOps/sec
standard
for(var i=0;i<this.a.length;i++){
    var b=this.a[i];
    console.log(b);
    var c=document.querySelector('.myBox');
    c.style.background='rgb('+b+','+b+','+b+')';
    console.clear();
}
ready
assignment in statement
for(var i=0,b;b=this.a[i];i++){
    console.log(b);
    var c=document.querySelector('.myBox');
    c.style.background='rgb('+b+','+b+','+b+')';
    console.clear();
}
ready
standard with predefined var
for(var i=0,b;i<this.a.length;i++){
    b=this.a[i];
    console.log(b);
    var c=document.querySelector('.myBox');
    c.style.background='rgb('+b+','+b+','+b+')';
    console.clear();
}
ready
assignment in statement evaluating
for(var i=0,b;(b=this.a[i]);i++){
    console.log(b);
    var c=document.querySelector('.myBox');
    c.style.background='rgb('+b+','+b+','+b+')';
    console.clear();
}
ready
standard with external var
var b;
for(var i=0;i<this.a.length;i++){
    b=b;
    console.log(b);
    var c=document.querySelector('.myBox');
    c.style.background='rgb('+b+','+b+','+b+')';
    console.clear();
}
ready
assignment in statement evaluating with external var
var b;
for(var i=0;(b=this.a[i]);i++){
    console.log(b);
    var c=document.querySelector('.myBox');
    c.style.background='rgb('+b+','+b+','+b+')';
    console.clear();
}
ready
assignment in statement with external var
var b;
for(var i=0;b=this.a[i];i++){
    console.log(b);
    var c=document.querySelector('.myBox');
    c.style.background='rgb('+b+','+b+','+b+')';
    console.clear();
}
ready

Revisions

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

  • Revision 1: published by Brandon on
  • Revision 2: published by anon on
  • Revision 3: published by Brandon on
  • Revision 6: published by Brandon on