探索 JavaScript 中性能最佳的函数

简介

在这个实验中，我们将探索并实践如何编写一个高性能函数，该函数从一个函数数组中返回执行速度最快的函数的索引。本实验重点在于使用 performance.now() 和 Array.prototype.map() 来准确测量函数的执行时间并进行比较。在实验结束时，你将对如何优化代码以实现最佳性能有更深入的理解。

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/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28502{{"性能最佳的函数"}} javascript/data_types -.-> lab-28502{{"性能最佳的函数"}} javascript/arith_ops -.-> lab-28502{{"性能最佳的函数"}} javascript/comp_ops -.-> lab-28502{{"性能最佳的函数"}} javascript/loops -.-> lab-28502{{"性能最佳的函数"}} javascript/higher_funcs -.-> lab-28502{{"性能最佳的函数"}} javascript/spread_rest -.-> lab-28502{{"性能最佳的函数"}} end

如何在 JavaScript 中找到性能最佳的函数

要在 JavaScript 中找到性能最佳的函数，请执行以下步骤：

打开终端/SSH 并输入 node 以开始练习编码。
使用 Array.prototype.map() 生成一个数组，其中每个值是函数执行 iterations 次后的总执行时间。
使用 performance.now() 值前后的差值，以高精度获取以毫秒为单位的总时间。
使用 Math.min() 找到最短执行时间，并返回该最短时间对应的索引，该索引对应于性能最佳的函数的索引。
如果你省略第二个参数 iterations，则函数将使用默认的 10000 次迭代。
请记住，使用的迭代次数越多，结果就越可靠，但所需时间也越长。

以下是一个示例代码片段：

const mostPerformant = (fns, iterations = 10000) => {
  const times = fns.map((fn) => {
    const before = performance.now();
    for (let i = 0; i < iterations; i++) fn();
    return performance.now() - before;
  });
  return times.indexOf(Math.min(...times));
};

要使用此函数，请将函数数组作为第一个参数，并将迭代次数作为第二个参数（可选）传递。例如：

mostPerformant([
  () => {
    // 在返回 `false` 之前遍历整个数组
    [1, 2, 3, 4, 5, 6, 7, 8, 9, "10"].every((el) => typeof el === "number");
  },
  () => {
    // 在返回 `false` 之前只需要到达索引 `1`
    [1, "2", 3, 4, 5, 6, 7, 8, 9, 10].every((el) => typeof el === "number");
  }
]); // 1

总结

恭喜你！你已经完成了“性能最佳的函数”实验。你可以在 LabEx 中练习更多实验来提升你的技能。