JavaScript 评测代码运行速度的几种方法

JavaScript 代码执行效率评估

一、利用 performance.now() 接口

在 JavaScript 环境中，可借助 performance.now() 接口来衡量代码的执行耗时。该接口返回高精度的页面时间戳，通过记录代码执行前后的时间差即可得出运行时长。

示例如下：

let t0 = performance.now();

// 执行需要测试的代码
for (let i = 0; i < 1000000000; i++) {
  // some code
}

let t1 = performance.now();
console.log("Code took " + (t1 - t0) + " milliseconds.");

需注意，performance.now() 接口仅支持现代浏览器，且结果易受计算机性能及页面负载等因素干扰，故该结果仅具相对参考价值。

二、利用 console.time() 与 console.timeEnd()

评估 JavaScript 代码运行速度的另一种方式是使用 console.time() 和 console.timeEnd()。这两者允许对特定代码段进行计时，并在执行完毕后于控制台展示计时数据。

示例如下：

console.time("Test code");

// 执行需要测试的代码
for (let i = 0; i < 1000000000; i++) {
  // some code
}

console.timeEnd("Test code");

控制台输出将类似于：

Test code: 824.047119140625 ms

采用 performance.now() 接口以及 console.time() 和 console.timeEnd() 方法均能实现快速的代码性能估算，但这些方法仅用于粗略评估而非精确测量。若需高精度评测，建议选用专业的性能分析工具。

三、引入第三方库

若需执行更严格的性能测试，可使用 Benchmark.js 或 JSLitmus 等第三方库。这些库支持多次运行代码并输出可读结果，从而更准确地评估性能。

例如，使用 Benchmark.js 进行性能测试的代码示例如下：

var suite = new Benchmark.Suite;

// 添加测试用例
suite.add('Test code', function() {
  for (let i = 0; i < 1000000000; i++) {
    // some code
  }
})

// 运行测试用例
.on('cycle', function(event) {
  console.log(String(event.target));
})
.run({ 'async': true });

可通过配置运行次数、自动执行测试等选项来适应具体需求。借助此类库，能对代码性能进行更精确的评估，并洞察其在不同浏览器及设备环境下的表现。

四、利用浏览器开发者工具

以 Chrome 浏览器为例，可利用其开发者工具来评测代码运行速度。

• 启动 Chrome 浏览器，并加载需评测的页面。
• 点击浏览器的“更多工具”选项卡，随后选择“开发者工具”。
• 在开发者工具的“控制台”选项卡中，点击“Performance”按钮以启动性能分析器。
• 点击“开始”按钮以启动代码运行速度评测。
• 在浏览器控制台中执行代码，并观察分析结果。您可以查看详细的性能分析报告，涵盖 CPU 使用率、内存占用及帧率等信息。

若使用 Firefox 浏览器，可利用其开发者工具评测代码运行速度。Firefox 开发者工具的操作流程与 Chrome 类似，具体细节请参阅 Firefox 开发者工具文档。

补充：JS 中代码执行速度测试

console.time("timer");for (let index = 0; index < 100; index++) {
        }
        console.timeEnd("timer");//timer: 0.007080078125ms

至此，关于 JavaScript 评测代码运行速度的文章介绍完毕。如需了解更多 js 测试代码运行速度相关内容，请查阅本站往期文章或继续浏览后续文章，感谢大家的支持！