意外と知らない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 ドライバーのさまざまなバージョンの簡単な分析

推薦する

ポップアップ効果を実現するにはjsを使用します

この記事の例では、ポップアップ効果を実現するためのjsの具体的なコードを参考までに共有しています。具...

MySQLのスペースをクリーンアップするいくつかの具体的な方法

目次序文1. ファイルのディスク使用量を確認する1.1 ディスク容量の使用状況を確認する1.2 ディ...

CocosCreator 一般的なフレームワーク設計リソース管理

目次Cocos Creator のリソース管理に関する問題リソースの依存関係リソースの使用レスローダ...

MySQL の暗黙的な型変換によって発生するインデックス障害の解決策

目次質問再生暗黙的な変換要約する参照する質問仕事中、1 つの SQL クエリ ステートメントのみを実...

CSS3 を使用してピカチュウのアニメーション壁紙を作成する例

文章さて、次はレンダリングを見せましょう。画像を見て初めて理解することに興味が湧くでしょう。そうでな...

Debian 9 システムに MySQL データベースをインストールする方法

序文タイトルを見ると、誰もが「Debian 9 に MySQL をインストールするにはどうすればいい...

Vue はトークンを取得してトークン ログインのサンプル コードを実装します

ログイン認証にトークンを使用する考え方は次のとおりです。 1. 初めてログインする場合、フロントエン...

Linux における $ 記号の基本的な使い方のまとめ

Linuxバージョン: CentOS 7 [root@azfdbdfsdf230lqdg1ba91 ...

MySQL パフォーマンス ストレス ベンチマーク ツール sysbench の使い方の紹介

目次1. sysbenchの紹介#プロジェクトダウンロードアドレス: 2. Sysbenchのインス...

MySQL コピーテーブルと許可分析の 3 つの実装方法

テーブルを素早くコピーする方法まず、テーブル db1.t を作成し、1000 行のデータを挿入します...

Linux には make コマンドがありません (make: *** ターゲットが指定されておらず、makefile または make コマンドのインストール方法が見つかりません)

知らせ! ! !この状況は、実際には仮想マシンのインストール中に回避できます。次回仮想マシンをテスト...

MIME TYPEとは?MIME-Typesタイプコレクション

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

jsを使用して中国語からピンインへの変換の完全な手順を実行します

jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...

SQL の左結合と右結合の原理と例の分析

テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...

Chromeブラウザの自動パスワード保存プロンプト機能を無効にする方法

注: Web 開発では、フォームに autocomplete="off" を追加...