forを高速に処理するには。

二重forの処理に20秒近くかかってしまいます。
大量のforを行いたい時、高速化するにはどのようなことに気をつければいいのでしょうか？

環境はWebブラウザ(Chorome)です。

追記
皆様のアドバイスにより、20秒超だったのが、100msになりました。
ありがとうございます。


var app = new Vue({
  el: '#app',
  data: {
    dataList: [] // 大量のデータ
  },
  computed: {
    getData: function () {
      // let dataL = this.dataList; 高速化のためこの行を追記した
      for(let i = 0, end = this.dataList.lenght; i < end; i++){
        for(let p = 0, endp = 10; p < endp; p++){
          // 処理
        }
      }
    }
  }

})

kei344

2019/11/05 10:36

処理を具体的にかかれないと、具体的な対策が建てられません。

matobaa

2019/11/05 10:37 編集

目標はどれくらいですか。 nodeですか、Webブラウザですか

think49

2019/11/06 03:38

リファクタリングは作業依頼であって、全コードを開示して「どうすればいいですか？」では質問にならないと思います。気をつけるべきポイントは回答で示しましたので、高速化を試みてから、要所となる再現コードを開示して、あなたの考えを示しつつ質問して下さい。

行動規範の内容に同意します

回答3件

普通に中身がなければ一瞬です

javascript
1x=0;
2for(let i = 0, end = 3000; i < end; i++){
3  for(let k = 0, endk = 10; k < endk; k++){
4    x++;
5  }
6}
7console.log(x); //30000

中身の処理のリファクタリングは、中身をみないとわかりません。
おそらく非同期処理でやるとかそういう対応になるでしょう

投稿2019/11/05 10:50

yambejp

総合スコア116694

退会済みユーザー

2019/11/05 11:56

ありがとうございます。確かに何もないと一瞬ですね。どこが重いのか、特定してみます。

行動規範の内容に同意します

高速化はそれほど難しい作業ではありません。時間がかかるだけです。
(ちなみに、最も難しいのは、「自分が十分に高速化したコード」を更に高速化する事です)

コードをアルゴリズムに変換する
DRY (Don't repeat yourself)の原則に則り、アルゴリズム上の無駄を排除する
アルゴリズムをコードに落とし込む
速度を計測し、まだ遅いようなら、1. に戻る

考え方の具体例をあげるなら、この辺り。

JavaScript - 配列で特定位置の周囲の値を効率よく調べたいアルゴリズム｜teratail

道のりが遠く感じるようでしたら、方法を見つけた時点で質問をクローズし、少し先の道が見えた時点でより具体的な質問をたてる事をお勧めします。

Re: ryo113 さん

投稿2019/11/05 14:17

think49

総合スコア18189

退会済みユーザー

2019/11/06 10:27

アドバイスにより速度を計測し、おかげさまで満足いく速度になりました。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

実験方法が悪いのかもしれませんが

JS
1for(let i = 0, end = 3000; i < end; i++){
2  for(let k = 0, endk = 10; k < endk; k++){
3     // 文字列操作などの重い処理
4  }
5}

を

JS
1
2for(let i = 0, end = 30000; i < end; i++){
3   // 文字列操作などの重い処理
4}
5

にすると処理が早くなります。以下資料です。

資料

比較対象1

Js
1
2var time = '';
3for(i=0;i<500;i++){
4  var startTime = performance.now();
5  var hoge1 = '';
6  var hoge2 = '';
7  var hoge3 = '';
8  var hoge4 = '';
9  var hoge5 = '';
10  var hoge6 = '';
11  var hoge7 = '';
12  var hoge8 = '';
13  var hoge9 = '';
14  var hoge10 = '';
15  for(let i = 0, end = 3000; i < end; i++){
16    for(let k = 0, endk = 10; k < endk; k++){
17     hoge1 = hoge1 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
18     hoge2 = hoge2 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
19     hoge3 = hoge3 +Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
20     hoge4 = hoge4 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
21     hoge5 = hoge5 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
22     hoge6 = hoge6 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
23     hoge7 = hoge7 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
24     hoge8 = hoge8 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
25     hoge9 = hoge9 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
26     hoge10 = hoge10 +Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
27    }
28}
29var endTime = performance.now();
30time += (endTime - startTime) + '<br>';
31}
32document.write(time);
33

比較対象2

Js
1
2var time = '';
3for(i=0;i<500;i++){
4  var startTime = performance.now();
5  var hoge1 = '';
6  var hoge2 = '';
7  var hoge3 = '';
8  var hoge4 = '';
9  var hoge5 = '';
10  var hoge6 = '';
11  var hoge7 = '';
12  var hoge8 = '';
13  var hoge9 = '';
14  var hoge10 = '';
15  for(let i = 0, end = 30000; i < end; i++){
16     hoge1 = hoge1 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
17     hoge2 = hoge2 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
18     hoge3 = hoge3 +Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
19     hoge4 = hoge4 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
20     hoge5 = hoge5 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
21     hoge6 = hoge6 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
22     hoge7 = hoge7 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
23     hoge8 = hoge8 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
24     hoge9 = hoge9 + Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
25     hoge10 = hoge10 +Math.floor( Math.random() * Math.pow(11, 20)) + Math.floor( Math.random() * Math.pow(11, 20));
26}
27var endTime = performance.now();
28time += (endTime - startTime) + '<br>';
29}
30document.write(time);