用赫兹频率掌握 JavaScript 函数性能

简介

在本实验中，我们将深入探讨如何使用赫兹频率的概念来测量 JavaScript 函数的性能。我们将学习如何使用 performance.now() 方法来计算执行函数所花费的时间，以及如何确定每秒的周期数。通过实际示例和练习，我们将探索同一函数不同实现之间的性能差异。

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

函数频率计算

要测量每秒函数执行的频率（赫兹），可使用 hz 函数。你可以按以下步骤进行：

打开终端/SSH 并输入 node 开始练习编码。
使用 performance.now() 获取迭代循环前后的毫秒数差异，以计算执行函数 iterations 次所花费的时间。
将毫秒数转换为秒数，并除以所花费的时间，以返回每秒的周期数。
如果你想使用默认的 100 次迭代，可省略第二个参数 iterations。

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

以下是使用 hz 函数比较两个计算 10000 个数组之和的函数性能的示例：

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 中练习更多实验来提升你的技能。