many loops or many function calls

JavaScript performance comparison

Revision 3 of this test case created

Info

In a case where you are repeatedly performing a few operations/functions on many array items, is it faster to loop through the array items once and call each function on each index, or to loop through the array items as many times as there are operations, but only calling each function once.

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    var number = 256;
    var smallArray = [];
    var smallLen = 200;
   
    var bigArray = [];
    var bigLen = 20000;
   
    for (var i = 0; i < smallLen; i++) {
    smallArray[i] = number; }
   
    for (i = 0; i < bigLen; i++) {
    bigArray[i] = number; }
   
    function expensiveProcess1 (x) {
    x = Math.sqrt(x);
    x = Math.sqrt(x);
    x = Math.sqrt(x); };
   
    function expensiveProcess2 (x) {
    x = Math.cos(x);
    x = Math.cos(x);
    x = Math.cos(x); };
   
    function expensiveProcess3 (x) {
    x = Math.log(x);
    x = Math.log(x);
    x = Math.log(x); };
   
    function expensiveProcess1loop (a) {
    var len = a.length;
    for (i = 0; i < len; i++) {
    a[i] = Math.sqrt(a[i]);
    a[i] = Math.sqrt(a[i]);
    a[i] = Math.sqrt(a[i]);
    }
    }
   
    function expensiveProcess2loop (a) {
    var len = a.length;
    for (i = 0; i < len; i++) {
    a[i] = Math.cos(a[i]);
    a[i] = Math.cos(a[i]);
    a[i] = Math.cos(a[i]);
    }
    }
   
    function expensiveProcess3loop (a) {
    var len = a.length;
    for (i = 0; i < len; i++) {
    a[i] = Math.log(a[i]);
    a[i] = Math.log(a[i]);
    a[i] = Math.log(a[i]);
    }
    }
   
    function cheapProcess1 (x) {
    x = x + 1;
    };
   
    function cheapProcess2 (x) {
    x = x * 2
    };
   
    function cheapProcess3 (x) {
    x = x / 3
    };
   
    function cheapProcess1loop (a) {
    var len = a.length;
    for (i = 0; i < len; i++) {
    a[i] = a[i] + 1;
    }
    }
   
    function cheapProcess2loop (a) {
    var len = a.length
    for (i = 0; i < len; i++) {
    a[i] = a[i] * 2;
    }
    }
   
    function cheapProcess3loop (a) {
    var len = a.length;
    for (i = 0; i < len; i++) {
    a[i] = a[i] / 3;
    }
    }
};
</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
one loop, many functions, expensive op, small array
for (i = 0; i < smallLen; i++) {
expensiveProcess1(smallArray[i]);
expensiveProcess2(smallArray[i]);
expensiveProcess3(smallArray[i]);
}
pending…
few functions, several loops, expensive op, small array
expensiveProcess1loop(smallArray);
expensiveProcess2loop(smallArray);
expensiveProcess3loop(smallArray);
pending…
one loop, many functions, expensive op, big array
for (i = 0; i < bigLen; i++) {
expensiveProcess1(bigArray[i]);
expensiveProcess2(bigArray[i]);
expensiveProcess3(bigArray[i]);
}
pending…
few functions, several loops, expensive op, big array
expensiveProcess1loop(bigArray);
expensiveProcess2loop(bigArray);
expensiveProcess3loop(bigArray);
pending…
one loop, many functions, cheap process, small array
for (i = 0; i < smallLen; i++) {
cheapProcess1(smallArray[i]);
cheapProcess2(smallArray[i]);
cheapProcess3(smallArray[i]);
}
pending…
few functions, several loops,, cheap process, small array
cheapProcess1loop(smallArray);
cheapProcess2loop(smallArray);
cheapProcess3loop(smallArray);
pending…
one loop, many functions, cheap process, big array
for (i = 0; i < bigLen; i++) {
cheapProcess1(bigArray[i]);
cheapProcess2(bigArray[i]);
cheapProcess3(bigArray[i]);
}
pending…
few functions, several loops, cheap process, big array
cheapProcess1loop(bigArray);
cheapProcess2loop(bigArray);
cheapProcess3loop(bigArray);
pending…
cheap control
cheapProcess1(number);
cheapProcess2(number);
cheapProcess3(number);
pending…
expensive control
expensiveProcess1(number);
expensiveProcess2(number);
expensiveProcess3(number);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment