意外と知らないJSのループ速度テストのいろいろを徹底解説

意外と知らないJSのループ速度テストのいろいろを徹底解説

序文

ループ速度をテストする前に、100 万個のデータを含む配列を作成しましょう。

定数len = 100 * 10000;
定数arr = [];
(i = 0; i < len; i++) の場合 {
  arr.push(Math.floor(Math.random() * len));
}

テスト環境は次のとおりです。

1. コンピューター:iMac (10.13.6)

2. プロセッサ: 4.2GHz Intel Core i7;

3. ブラウザ: Chrome (89.0.4389.82)

1. forループ

for ループは最もよく使われるループ方法です。その最大の利点は、構造が明確でいつでも停止できることです。

まずは10回テストしてみましょう:

console.log('テスト');
(k = 0; k < 10; k++とします) {
  コンソールで時間を指定します。
  合計を 0 とします。
  (i = 0; i < len; i++) の場合 {
    合計 += arr[i] % 100;
  }
  コンソールのtimeEnd('for');
}

最終結果は次のとおりです。

1回目と2回目は時間がかかりましたが、3回目以降は1.25ms程度で安定しました。

2. whileループとdo-whileループ

これら 2 つを組み合わせると、構造が十分に類似しており、いつでも破損して停止することもできます。

console.log('\nテスト中');
(k = 0; k < 10; k++とします) {
  コンソールで時間('while');
  合計を 0 とします。
  i = 0 とします。
  (i < 長さ) の間 {
    合計 += arr[i] % 100;
    私は++;
  }
  コンソールのtimeEnd('while');
}
console.log('\ntest do-while');
(k = 0; k < 10; k++とします) {
  console.time('do-while');
  合計を 0 とします。
  i = 0 とします。
  する {
    合計 += arr[i] % 100;
    私は++;
  } ながら (i < len);
  console.timeEnd('do-while');
}

while ループと do-while ループの結果はほぼ同じです。ブラウザーで実行されている while ループの結果を見てみましょう。

for ループと同じくらいの速さです。

3. forEach、map、reduce ループ

次に、よく使用される 3 つの配列メソッド (forEach、map、reduce など) について説明します。これら 3 つのメソッドは、ES6 標準に追加された新しい構文です。

3.1 forEachの簡単な紹介

これらのメソッドはループを停止できません。break または return のどちらを使用しても、ループ全体を停止することはできません。例えば、3の倍数に遭遇したらループを停止したいというテストを行うことができます。

[1, 2, 3, 4, 5].forEach((項目) => {
  console.log(`before return: ${item}`);
  if (item % 3 === 0) {
    戻る;
  }
  console.log(`戻り後: ${item}`);
});

結果は次のとおりです。

実行結果から、return はループに続くステートメントを実行せず、ループ全体を停止しないことがわかります。次の 4 と 5 は正常に出力されます。

玄麦のようにサイクルを止めることはできないというのは本当ですか?いいえ、このサイクルを止める別の方法があります。例外がスローされます:

試す {
  [1, 2, 3, 4, 5].forEach((項目) => {
    console.log(`before return: ${item}`);
    if (item % 3 === 0) {
      新しいエラーをスローします('break forEach');
    }
    console.log(`戻り後: ${item}`);
  });
} キャッチ (e) {}

forEach で例外がスローされた後、ループを停止し、try-catch を使用して例外をキャッチして、サービス全体が中断されるのを防ぐことができます。

forEach ループを停止することも可能ですが、実装するのはかなり面倒です。したがって、ループ全体を停止する必要がない場合は、forEach や map などのループ メソッドを使用できます。それ以外の場合は、他のループ メソッドを使用する必要があります。

3.2 forEach等の速度テスト

さて、次に、これら 3 つのサイクル方法のサイクル速度をテストします。

// forEach のテスト:
console.log('\ntest forEach');
(k = 0; k < 10; k++とします) {
  コンソールで時間を設定します。
  合計を 0 とします。
  arr.forEach((アイテム) => {
    合計 += 項目 % 100;
  });
  コンソールのtimeEnd('forEach');
}
// マップテスト:
console.log('\nテストマップ');
(k = 0; k < 10; k++とします) {
  コンソールに時間を表示します。
  合計を 0 とします。
  arr.map((アイテム) => {
    合計 += 項目 % 100;
  });
  コンソールのtimeEnd('マップ');
}
// 削減のテスト:
console.log('\nテスト削減');
(k = 0; k < 10; k++とします) {
  コンソールで時間を減らす
  合計を 0 とします。
  arr.reduce((_, 項目) => {
    合計 += 項目 % 100;
  }, 0);
  コンソールのtimeEnd('reduce');
}

これら 3 つのループの時間はほぼ同じなので、ここでは forEach のテスト結果のみをインターセプトしました。

10 回のループを実行した後、forEach の実行時間は約 10.8 ミリ秒となり、これは上記の for ループと while ループのほぼ 10 倍の長さになります。

4. ~の

ES6 は C++、Java、C#、Python から借用し、すべてのデータ構造を走査するための統一された方法として for...of ループを導入します。

4.1 for-ofの簡単な紹介

データ構造に Symbol.iterator プロパティが展開されている限り、そのデータ構造には iterator インターフェイスがあると見なされ、そのメンバーは for...of ループを使用して走査できます。つまり、for...of ループはデータ構造の Symbol.iterator メソッドを呼び出します。

for...of ループのスコープには、配列、Set および Map 構造、一部の配列のようなオブジェクト (引数オブジェクト、DOM NodeList オブジェクトなど)、後述する Generator オブジェクト、および文字列が含まれます。

for-of は値自体を取得しますが、for-in はキーを取得し、キーを通じて現在のデータを取得します。

const フルーツ = ['リンゴ', 'バナナ', 'オレンジ', 'レモン'];

for (果物の定数値) {
  console.log(値); // 'リンゴ'、'バナナ'、'オレンジ'、'レモン'
}

4.2 for-ofループの速度測定

for-of ループの速度をテストするコード:

console.log('\ntest for-of');
(k = 0; k < 10; k++とします) {
  console.time('for-of');
  合計を 0 とします。
  for (arrのconst値) {
    合計 += 値 % 100;
  }
  console.timeEnd('for-of');
}

テスト結果:

同じループを複数回繰り返す場合、最初の 2 つの for-of ループには 15 ミリ秒を超える時間がかかります。しかし、その後の実行では、ループ速度は約 1.5 ミリ秒に低下し、これは for ループ時間とほぼ同じになります。

5. for-in ループ

for-in は通常、オブジェクト型のループに使用されますが、配列のループにも使用できます。結局のところ、すべてのデータ型の祖先はオブジェクト型です。

console.log('\nテストfor-in');
(k = 0; k < 10; k++とします) {
  console.time('for-in');
  合計を 0 とします。
  for (let key in arr) {
    合計 += arr[キー] % 100;
  }
  console.timeEnd('for-in');
}

テスト結果:

for-in ループの速度テスト データは驚くべきもので、まさに別格であり、最良の場合、少なくとも 136 ミリ秒かかります。 for-in ループの効率が非常に低いことがわかります。

配列型データには for-in ループを使用しないでください。Object 型データの場合は、まず Object.values() を介してすべての値データを取得し、次に forEach ループを使用します。

定数obj = {};
(i = 0; i < len; i++) の場合 {
  obj[i] = Math.floor(Math.random() * len);
}
(k = 0; k < 10; k++とします) {
  console.time('forEach-values');
  合計を 0 とします。
  Object.values(obj).forEach((item) => {
    合計 += 項目 % 100;
  });
  console.timeEnd('forEach-values');
}

さらに 1 ステップ追加しても、ループ時間は約 14 ミリ秒となり、for-in よりもはるかに高速になります。

6. 結論

すべてのループ データを比較してみましょう。ここでは、各ループのテスト数を 100 に調整します。横軸はループ数、数値軸はループ時間です。

1. for ループ、while ループ、d-while ループは最も時間がかかりません。

2. for-of ループは少し時間がかかります。

3. forEach ループ、map ループ、reduce ループのデータは似ていますが、for-of ループの継続時間はわずかに長くなります。

4. for-in ループは最も時間がかかります。

各ループの期間は異なります。ループ方法を選択するときは、時間を考慮するだけでなく、セマンティクスと使用シナリオも考慮する必要があります。

以上、意外と知らないJSの各種ループ速度測定について詳しく説明しました。JSの各種ループ速度測定についてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください!

以下もご興味があるかもしれません:
  • JavaScript ループトラバーサルの 24 種類のメソッドをすべてご存知ですか?
  • JavaScriptのループの違いについての詳細な説明
  • JavaScript イベント ループのケース スタディ
  • JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)
  • jsのイベントループ機構の解析
  • JS の配列トラバーサルについて、一般的なループをいくつ知っていますか?
  • JavaScript で円形カルーセルを実装する
  • JavaScript の例におけるループの使用法の詳細な説明

<<:  TomcatはXMLを解析し、リフレクションを通じてオブジェクトを作成します。

>>:  mysql.data.dll ドライバーのさまざまなバージョンの簡単な分析

推薦する

モバイルデバイスで 1 ピクセルの境界線の問題を解決するいくつかの方法 (5 つの方法)

この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。...

DockerとFastDFSのインストールコマンドと使い方の詳しい説明

Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...

CentOS 8.1 で LEMP (Linux+Nginx+MySQL+PHP) 環境を構築する (チュートリアルの詳細)

目次ステップ1: CentOS 8でパッケージを更新するステップ2: CentOS 8にNginx ...

MySQL テーブルスペースの断片化の概念と関連する問題の解決策

目次背景表領域の断片化とは何ですか?表領域の断片化を確認する方法表スペースの断片化問題を解決する方法...

Linux 上の MariaDB は root ユーザーで起動します (推奨)

最近、セキュリティ製品をテストする必要があったため、mariadb の起動ユーザーを root に調...

Vueはフォーム検証機能を実装します

この記事では主に、NUXT の validate メソッドに基づいてフォーム検証を実装する方法につい...

MySQL 外部キー設定方法の例

1. 外部キーの設定方法1. MySQL では、2 つのテーブルを関連付けるために、外部キー (FO...

HTMLページの文字セットを指定する2つの方法

1. HTMLページの文字セットを指定する2つの方法方法1: <メタ文字セット="u...

ウェブデザインにおける画像フォーマットとデザインの関係を詳しく説明

なぜこの領域のコンテンツを整理したいのでしょうか。それは、油絵の具とキャンバスを理解する必要があり、...

LeetCode の SQL 実装 (196. 重複するメールボックスを削除する)

[LeetCode] 196.重複したメールを削除するSQL クエリを記述して、Person とい...

MySQL 5.7.17 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

インターネット上にはMySQL 5.7.17のインストールチュートリアルがほとんどなく不十分なので、...

MySQLトランザクションの特徴と分離レベルについてお話ししましょう

インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...

WindowsにOpenSSLをインストールし、OpenSSLを使用して公開鍵と秘密鍵を生成します。

1. OpenSSL公式サイト公式ダウンロードアドレス: https://www.openssl....

Web プロジェクト開発 VUE の混合と継承の原則

目次ミキシンMixin ノート (重複名)ローカルミックスイングローバル ミックスイン定義とグローバ...

JavaScript シングルスレッドと非同期の詳細

目次1. タスクキュー2. 混乱を招く問題を説明する1. setTimeout(f1,0)とは何です...