ヘルツ周波数を使った JavaScript 関数のパフォーマンスのマスター

はじめに

この実験では、ヘルツ周波数の概念を使ってJavaScript関数のパフォーマンスを測定します。関数を実行するのにかかった経過時間を計算するために performance.now() メソッドをどのように使うか、および1秒当たりのサイクル数をどのように決定するかを学びます。実際の例と演習を通じて、同じ関数の異なる実装間のパフォーマンスの違いを探ります。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28385{{"関数のヘルツ周波数"}} javascript/data_types -.-> lab-28385{{"関数のヘルツ周波数"}} javascript/arith_ops -.-> lab-28385{{"関数のヘルツ周波数"}} javascript/comp_ops -.-> lab-28385{{"関数のヘルツ周波数"}} javascript/loops -.-> lab-28385{{"関数のヘルツ周波数"}} javascript/array_methods -.-> lab-28385{{"関数のヘルツ周波数"}} javascript/higher_funcs -.-> lab-28385{{"関数のヘルツ周波数"}} end

関数の周波数の計算

1秒間の関数の実行回数（hz/ヘルツ）を測定するには、hz 関数を使用します。これは、次の手順に従って行うことができます。

ターミナル/SSHを開き、コーディングを練習するために node と入力します。
イテレーションループの前後でミリ秒単位の差分を取得するために performance.now() を使用して、関数を iterations 回実行するのにかかった経過時間を計算します。
ミリ秒を秒に変換し、それを経過時間で割って1秒当たりのサイクル数を返します。
100回のイテレーションのデフォルトを使用したい場合は、2番目の引数 iterations を省略します。

const hz = (fn, iterations = 100) => {
  const before = performance.now();
  for (let i = 0; i < iterations; i++) fn();
  return (1000 * iterations) / (performance.now() - before);
};

10,000個の数値の配列の合計を計算する2つの関数のパフォーマンスを比較するために hz 関数を使用する例を以下に示します。

const numbers = Array(10000)
  .fill()
  .map((_, i) => i);

const sumReduce = () => numbers.reduce((acc, n) => acc + n, 0);
const sumForLoop = () => {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) sum += numbers[i];
  return sum;
};

Math.round(hz(sumReduce)); // 572
Math.round(hz(sumForLoop)); // 4784

この例では、sumReduce は関数の実行頻度が低いため、sumForLoop よりも高速です。

まとめ

おめでとうございます！関数のヘルツ周波数の実験を完了しました。あなたのスキルを向上させるために、LabExでさらに多くの実験を練習できます。