Is concatenating an array to itself faster than looping through the array to create more indexes?

Question

I was just taking a look through the source for the examples on the three.js github page, and I came across this ImprovedNoise class, which is basically a Perlin noise script:

https://github.com/mrdoob/three.js/blob/master/examples/js/ImprovedNoise.js

At the very top of the ImprovedNoise function is this:

var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
         23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
         174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
         133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
         89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
         202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
         248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
         178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
         14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
         93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];

for (var i=0; i < 256 ; i++) {

    p[256+i] = p[i];

}

You'll notice that p is populated with a randomly-sorted array of the numbers 0 to 255. Once the p array is established, the script does a for loop over every position in the array and effectively latches a copy of itself from positions 256 to 511. The order is the same, but the indexes are shifted by 256.

So my question is this: is it faster in JavaScript to loop over an array like this or to simply do..

p = p.concat(p);

Answer 1

You don't need to duplicate the array at all, just use p[i % 256] to access its numeric members.

Answer 2

It is browser-dependent:

• Firefox 4 gives concat being about 1/2 as fast.
• Chrome 11 gives the concat method being 10 times faster.
• IE9 gives the concat method being about 3/4 as fast
• Safari 5 gives the concat method being about 1/3 as fast.
• Opera 11 gives the concat method being about 1/4 as fast.

Try it for yourself:

http://jsperf.com/concat-vs-forloop

Answer 3

Alright I'm going to time it for you. Will edit to include more browsers (1000000 execution of either of your code) . Good browser test, too! Machine spec is i5 430M and 4GB RAM on win7 64bit

Test code:

<script>

function do1(){
p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
         23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
         174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
         133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
         89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
         202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
         248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
         178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
         14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
         93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
for (var i=0; i < 256 ; i++) {

    p[256+i] = p[i];

}
}

function do2(){
p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
         23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
         174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
         133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
         89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
         202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
         248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
         178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
         14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
         93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
p = p.concat(p);
}

function timeit(func){
var date1 = new Date(); 
var start = date1.getTime();
for (i=0;i<1000000;i++) func();
var date2 = new Date();
var end = date2.getTime();
alert(end-start);
}

timeit(do1);
//timeit(do2); // uncomment to activate

</script>

Chrome 11

Method 1 (loop):

• 4669ms
• 4809ms
• 5103ms
• 5025ms
• 4786ms

Method 2 (concat):

• 387ms
• 370ms
• 494ms
• 640ms
• 394ms

Opera 11.1 (3 tests.. takes to long)

Method 1 (loop)

• 7884 ms
• 7621 ms
• 7546 ms

Note: For one of my run I got > 98000ms .. IDK what happened.

Method 2 (concat)

• 27684 ms
• 28479 ms
• 23539 ms

IE 9

Method 1 (loop)

• 6065ms
• 6026ms
• 6214ms

Method 2 (concat)

• 8064 ms
• 8105 ms
• 7954 ms