将数组连接到自身比循环遍历数组以创建更多索引更快

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

本文关键字:数组 创建 索引 遍历 循环 连接      更新时间:2023-09-26

我只是在浏览了三个.js github页面上的示例源代码,我遇到了这个ImprovedNoise类,它基本上是一个Perlin噪声脚本:

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

在改进噪声函数的最顶部是这样的:

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];
}

您会注意到 p 填充了一个随机排序的数字 0 到 255 数组。建立p数组后,脚本会对数组中的每个位置执行for循环,并有效地将自身的副本从位置 256 锁存到 511。顺序相同,但索引偏移了 256。

所以我的问题是:在 JavaScript 中循环这样的数组还是简单地这样做更快。

p = p.concat(p);

它依赖于浏览器:

  • Firefox 4 的 concat 速度大约是 1/2。
  • Chrome 11 使 concat 方法快 10 倍。
  • IE9 使 concat 方法的速度约为 3/4
  • Safari 5 给出的 concat 方法的速度大约是 1/3。
  • Opera 11 给出的 concat 方法大约是 1/4 的速度。

亲自尝试一下:

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

好吧,

我会为你计时。将编辑以包含更多浏览器(执行您的任一代码的 1000000 次)。浏览器测试也很好!机器规格为 i5 430M 和 win7 64 位上的 4GB RAM

测试代码:

<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>

铬 11

方法 1(循环):

  • 4669毫秒
  • 4809毫秒
  • 5103毫秒
  • 5025毫秒
  • 4786毫秒

方法 2(连接):

  • 387毫秒
  • 370毫秒
  • 494毫秒
  • 640毫秒
  • 394毫秒

Opera 11.1 (3 次测试需要很长时间)

方法 1(循环)

  • 7884 毫秒
  • 7621 毫秒
  • 7546 毫秒

注意:对于我的一次跑步,我得到了> 98000 毫秒。IDK发生了什么事。

方法 2(连接)

  • 27684 毫秒
  • 28479 毫秒
  • 23539 毫秒

IE 9

浏览器

方法 1(循环)

  • 6065毫秒
  • 6026毫秒
  • 6214毫秒

方法 2(连接)

  • 8064 毫秒
  • 8105 毫秒
  • 7954 毫秒

您根本不需要复制数组,只需使用 p[i % 256] 访问其数字成员即可。