for 小分け 意味がない

Question

少しでもforの負荷を軽減したいと思い、
1のコード　1回で10000回ループ処理させるもの
2のコード　1回で10000回とせず、10回づつ小分けにしてforでループ処理→10000回まで繰り返す処理を考えましたが、
小分けにした場合と1度の場合では負荷と速度の大きな差は出ないのでしょうか？
差を出せないのであれば、それはなぜですか
理屈がわかりません

1
<script>
function a(){
for(i=0;i<=10000;i++){
console.log(i);
}
}
a();
</script>

2
<script>
function a(){
max_num=10000;
n2=10;
n=0;
while(n2<=max_num){
for(i=n;i<=n2;i++){
console.log(i);
}
n=n+10;
n2=n+10;
}
}
a();
</script>

Comments

[Zuishin]

> 差を出せないのであれば、それはなぜですか

逆に、どのような差が出ると思っていますか？

またその差が出る理由はどういうものと考えていますか？

まず「負荷」という言葉が具体的に何を指しているかの説明から始め、以上三点について質問に追記してください。

Answer 1

計測

小分けにした場合と1度の場合では負荷と速度の大きな差は出ないのでしょうか？

実際に計測して下さい。
環境の違いで速度は変わるものなので、自分の環境で計測するのが最も確実です。

function a1() {
  for (var i = 0; i <= 10000; i++) {
    console.log(i);
  }
}

function a2() {
  var max_num = 10000;
  var n2 = 10;
  var n = 0;
  while (n2 <= max_num) {
    for (var i = n; i <= n2; i++) {
      console.log(i);
    }
    n = n + 10;
    n2 = n + 10;
  }
}

console.time('a1');
a1();
console.timeEnd('a1');

console.time('a2');
a2();
console.timeEnd('a2');

結果

a1: 659.2548828125 ms
a2: 682.5908203125 ms

a1が速いのは、a2よりも処理が少ないからです。
a2は10000回ループさせる為にwhile文を実行し、新しい変数を定義しています。

有意な速度差

有意な速度差を見出すには、ボトルネックとなる処理の実行回数を減らすことです。

function a3() {
  for (var i = 0, array = []; i < 10001; i++) {
    array.push(i);
  }

  console.log(array.join('\n'));
}

console.time('a3');
a3();
console.timeEnd('a3');

結果

a3: 5.558837890625 ms

console.log() を実行すると、コンソールに文字列が出力される為、画面の再描画が発生します。
console.log() の実行回数を1回にすれば、再描画は1回で済みます。

---

同じ理屈で下記2つのパターンで実行時間を計測した場合も差が生まれます。

• コンソールを開いた状態でページを開く
• コンソールを閉じた状態でページを開く

本回答では有意な差を出す為に、コンソールを開いた状態で console.time() を実行しています。

グローバル変数

高速化を狙う場合、グローバル変数は可能な限り、避けるべきです。
スコープチェーンの関係上、グローバル変数はローカル変数よりも遅いからです。
ご質問のコードはグローバル変数を使用していますが、本回答のコードではローカル変数に修正しています。

Re: valvalx さん

Answer 2

単純ループの話なら、分割しようがしまいが変わらないでしょうね。
膨大な配列データを処理するとかでなく、単なる数値データの足し算程度なら。

メモリやリソースをどう使うかによっては、分割の仕方で影響が出てくるかと。
足し算じゃなくて、例えば1万文字を1万回連結するとかメモリを使うよね。
DOM生成もwebブラウザのリソースを使う処理だし。

前の質問でDOM生成の話を踏まえますが、
DOM生成する→レンダリングされる、
の一連の処理で、
1件ずつDOM生成を指示するのと、
一度に1万件溜め込んで一度にDOM生成させるのと、
10件や20件ずつ区切って繰り返すのとで、
DOM生成→レンダリングのタイミング次第でバランスを取る必要があるということなんじゃないかと。
（統計データを取ってないので、曖昧な言い方になってしまいますが。）

ついでに、
もしかして簡単にページ遷移してしまうようなページで
1万件もDOM生成するとかやってたりしませんか？
それは無駄な処理をしていると思います。
そこはしっかりページネーションして、
必要な情報量で見せるように改善したら良いかと。

Answer 3

差を出せないのであれば、それはなぜですか
理屈がわかりません

１秒かかる仕事を１万回ループさせれば１万秒かかりますよね

その仕事を１０回ループさせると何秒でしょうか。
そして、その１０回ループを千回繰り返したら何秒になるでしょう。

＃小学校の宿題かなんか？

Answer 4

※ご指摘いただき、ループ回数の間違いを調整しました

以下実験

1. シングルループ let
2. シングルループ var
3. 多重ループ let
4. 多重ループ var

(速い) 1 ＞ 2 ＞ 3 ＞ 4 (遅い)

const t=new Date().getTime();
for(let i=0;i<=10**9;i++){
void(0);
}
console.log(new Date().getTime()-t);

const t=new Date().getTime();
for(var i=0;i<=10**9;i++){
void(0);
}
console.log(new Date().getTime()-t);

const t=new Date().getTime();
for(let i1=0;i1<10;i1++){
for(let i2=0;i2<10;i2++){
for(let i3=0;i3<10;i3++){
for(let i4=0;i4<10;i4++){
for(let i5=0;i5<10;i5++){
for(let i6=0;i6<10;i6++){
for(let i7=0;i7<10;i7++){
for(let i8=0;i8<10;i8++){
for(let i9=0;i9<10;i9++){
void(0);
}
}
}
}
}
}
}
}
}
console.log(new Date().getTime()-t);

const t=new Date().getTime();
for(var i1=0;i1<10;i1++){
for(var i2=0;i2<10;i2++){
for(var i3=0;i3<10;i3++){
for(var i4=0;i4<10;i4++){
for(var i5=0;i5<10;i5++){
for(var i6=0;i6<10;i6++){
for(var i7=0;i7<10;i7++){
for(var i8=0;i8<10;i8++){
for(var i9=0;i9<10;i9++){
void(0);
}
}
}
}
}
}
}
}
}
console.log(new Date().getTime()-t);

Comments

[退会済みユーザー]

0～10の11回やってるように見えなくもない。「＜＝」じゃなく「＜」ではないかと。

[yambejp]

ありゃ・・・ホントだ
失礼しました、修正しました。

Answer 5

結局最終的に10000回ループしたのでは意味がありません。
1回のループで複数回分まとめて処理が可能でループ回数を減らせるのであれば意味がありますが、
単純に小分けだけしてもむしろ小分けにするため余計なことをしている分遅くなるだけです。