Benchmark测试性能
Benchmark.js 是一个强大的 JavaScript 基准测试库，用于精确测量代码性能。本文将详细介绍其使用方法，包含完整示例代码。
安装方法
使用 npm 安装
bash
npm install benchmark --save浏览器直接引入
html
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/benchmark@2.1.4/benchmark.min.js"></script>基础用法
javascript
const Benchmark = require('benchmark');
const suite = new Benchmark.Suite();
// 添加测试用例
suite
.add('RegExp#test', () => {
/o/.test('Hello World!');
})
.add('String#indexOf', () => {
'Hello World!'.indexOf('o') > -1;
})
.add('String#includes', () => {
'Hello World!'.includes('o');
})
// 添加事件监听器
.on('cycle', (event) => {
console.log(String(event.target));
})
.on('complete', function () {
console.log('最快的方法是: ' + this.filter('fastest').map('name'));
})
// 运行测试
.run({ async: true });关键概念
1. Suite（测试套件）
测试用例的容器，用于组织和管理多个基准测试
2. Test（测试用例）
单个需要测试的代码片段
3. 重要事件：
cycle: 每个测试完成时触发complete: 所有测试完成后触发start: 测试套件开始时触发error: 测试出错时触发
高级配置
测试用例配置选项
javascript
suite.add('Custom test', {
fn: function () {
/* 测试代码 */
},
minSamples: 50, // 最小样本数
maxTime: 5, // 最大运行时间（秒）
delay: 0.1, // 测试之间的延迟
initCount: 5, // 初始预热次数
name: '自定义测试', // 测试名称
onStart: function () {
/* 测试开始时 */
},
onCycle: function () {
/* 每次循环后 */
},
onComplete: function () {
/* 测试完成后 */
},
onError: function () {
/* 出错时 */
}
});异步测试
javascript
suite.add('Async test', {
defer: true,
fn: function (deferred) {
setTimeout(function () {
// 异步操作
deferred.resolve();
}, 50);
}
});测试结果解析
测试结果包含的关键指标：
text
String#indexOf x 62,405,689 ops/sec ±1.21% (92 runs sampled)- ops/sec: 每秒操作次数（越高越好）
- ±1.21%: 误差范围（越小越稳定）
- (92 runs sampled): 采样次数
最佳实践
- 避免死码消除：确保测试代码有实际输出
javascript
// 错误方式（会被优化掉）
let sum = 0;
for (let i = 0; i < array.length; i++) {}
// 正确方式
let sum = 0;
for (let i = 0; i < array.length; i++) {
sum += array[i];
}
return sum;- 使用Setup/Teardown：准备测试环境
javascript
suite.add('Array#forEach', {
setup: function () {
this.array = Array(1000)
.fill()
.map((_, i) => i);
},
fn: function () {
let sum = 0;
this.array.forEach((n) => (sum += n));
return sum;
}
});- 控制测试环境：
javascript
// 在Node.js中禁用优化
function noop() {}
const testFn = Benchmark.prototype._createTest(test);
testFn();
noop(testFn);完整示例
html
<!DOCTYPE html>
<html>
<head>
<title>Benchmark.js 示例</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/benchmark@2.1.4/benchmark.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.results {
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 5px;
}
.test-case {
margin-bottom: 15px;
padding: 10px;
border-left: 4px solid #4285f4;
}
.fastest {
border-left-color: #34a853;
background-color: #e6f4ea;
}
.chart {
height: 300px;
margin: 20px 0;
display: flex;
align-items: flex-end;
gap: 10px;
}
.bar {
flex: 1;
background: #4285f4;
position: relative;
}
.bar-label {
position: absolute;
bottom: -25px;
width: 100%;
text-align: center;
}
.bar-value {
position: absolute;
top: -25px;
width: 100%;
text-align: center;
font-weight: bold;
}
button {
padding: 10px 20px;
background: #4285f4;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #3367d6;
}
</style>
</head>
<body>
<h1>Benchmark.js 性能测试</h1>
<button id="runTests">运行测试</button>
<div class="results" id="results"></div>
<script>
document.getElementById('runTests').addEventListener('click', runBenchmarks);
function runBenchmarks() {
const resultsElement = document.getElementById('results');
resultsElement.innerHTML = '<p>运行测试中...</p>';
const suite = new Benchmark.Suite();
const testData = Array(10000)
.fill()
.map((_, i) => i);
let results = [];
// 添加测试用例
suite
.add('for循环', function () {
let sum = 0;
for (let i = 0; i < testData.length; i++) {
sum += testData[i];
}
return sum;
})
.add('for...of循环', function () {
let sum = 0;
for (const value of testData) {
sum += value;
}
return sum;
})
.add('Array#reduce', function () {
return testData.reduce((sum, val) => sum + val, 0);
})
.add('Array#forEach', function () {
let sum = 0;
testData.forEach((val) => (sum += val));
return sum;
})
.add('while循环', function () {
let sum = 0;
let i = testData.length;
while (i--) {
sum += testData[i];
}
return sum;
})
.on('cycle', (event) => {
const result = {
name: event.target.name,
hz: event.target.hz,
stats: event.target.stats
};
results.push(result);
resultsElement.innerHTML += `<div class="test-case">${String(event.target)}</div>`;
})
.on('complete', function () {
const fastest = this.filter('fastest')[0].name;
resultsElement.innerHTML += `<div class="test-case fastest">最快的方法是: ${fastest}</div>`;
// 渲染柱状图
renderBarChart(results, fastest);
})
.run({ async: true });
}
function renderBarChart(results, fastest) {
const maxOps = Math.max(...results.map((r) => r.hz));
const chartElement = document.createElement('div');
chartElement.className = 'chart';
results.forEach((result) => {
const height = (result.hz / maxOps) * 100;
const isFastest = result.name === fastest;
const bar = document.createElement('div');
bar.className = 'bar';
bar.style.height = `${height}%`;
bar.style.background = isFastest ? '#34a853' : '#4285f4';
const value = document.createElement('div');
value.className = 'bar-value';
value.textContent = (result.hz / 1000000).toFixed(2) + 'M';
const label = document.createElement('div');
label.className = 'bar-label';
label.textContent = result.name;
bar.appendChild(value);
bar.appendChild(label);
chartElement.appendChild(bar);
});
document.getElementById('results').appendChild(chartElement);
}
</script>
</body>
</html>
常见问题解决
测试结果波动大：
- 增加
minSamples和maxTime - 关闭后台应用程序
- 禁用浏览器扩展
- 增加
测试函数被优化掉：
- 确保有实际输出
- 使用
this上下文存储结果
javascriptsuite.add('Test', function() { this.result = /* 计算结果 */; });内存问题：
- 在
setup中初始化数据 - 在
teardown中清理资源 - 避免在测试中创建大型对象
- 在
Benchmark.js 提供了专业级的性能测试能力，通过合理配置和遵循最佳实践，您可以获得准确的性能数据来优化代码。