使用Benchmark.js和jsPerf分析代码性能

赞助我以写出更好的文章

若是您以为文章对您有帮助，能够逐个点击如下连接，相似于Google ads，不须要您付出任何费用，天天均可以来点一次噢，费用将由广告商承担，give me a cup of coffee?

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

https://app.codesponsor.io/li...

---

前言

前端开发中，掌握好浏览器的特性进行有针对性的性能调优是一项基本工做，同时，比较不一样代码的执行速度也是一项关键的工做。

好比，当咱们想比较RegExp的test方法和String对象的indexOf方法查找字符串谁的速度更快的话，js代码在不一样的浏览器，不一样的操做系统环境运行的效率多是不同的，这就是为何咱们须要对其进行基准测试，在作基准测试方面，咱们可使用Benchmark.js和使用jsPerf（一个基于JSLitmus的基准测试库）。咱们可使用jsPerf来分享你的基准测试。

Benchmark.js 的使用

github 地址：https://github.com/bestiejs/b...

咱们在不少github 开源项目中，每每都能看到benchmark文件夹，好比下面这个：

因而Google之，发现这是用来作基准测试的。因而乎：

首先咱们在系统根目录下，经过npm intsall benchmark 来安装benchmark。该模块会被写入node_modules文件夹中，咱们在test.js文件中经过require方法引入该模块。

将以下代码写入test.js文件，该文件置于系统根目录下：

var Benchmark = require('benchmark');
var suite = new Benchmark.Suite;

// 添加测试
suite.add('RegExp#test', function() {
    /o/.test('Hello World!');
})
    .add('String#indexOf', function() {
        'Hello World!'.indexOf('o') > -1;
    })
// add listeners
    .on('cycle', function(event) {
        console.log(String(event.target));
    })
    .on('complete', function() {
        console.log('Fastest is ' + this.filter('fastest').pluck('name'));
    })
// run async
    .run({ 'async': true });

而后在终端执行node test.js 可见输出结果以下：

➜  ~ git:(master) ✗ node test.js
RegExp#test x 9,847,928 ops/sec ±1.47% (83 runs sampled)
String#indexOf x 23,366,017 ops/sec ±0.91% (96 runs sampled)
Fastest is String#indexOf

结果最快的就是String对象的indexOf方法，其中，Ops/sec 测试结果以每秒钟执行测试代码的次数（Ops/sec）显示，这个数值越大越好。除了这个结果外，同时会显示测试过程当中的统计偏差，以及相对最好的慢了多少（%）

call和apply的比较

var Benchmark = require('benchmark');
var suite = new Benchmark.Suite;
var arr1 = function (str) {
    return [].slice.apply(str);
};
var str2 = function (str) {
    return [].slice.call(str);
};
// 添加测试
suite.add('arr1', function() {
    arr1('test');
})
    .add('str2', function() {
        str2('test');
    })
// add listeners
    .on('cycle', function(event) {
        console.log(String(event.target));
    })
    .on('complete', function() {
        console.log('Fastest is ' + this.filter('fastest').pluck('name'));
    })
// run async
    .run({ 'async': true });

输出以下内容：

arr1 x 596,505 ops/sec ±1.14% (95 runs sampled)
str2 x 627,822 ops/sec ±1.27% (92 runs sampled)
Fastest is str2

本地的使用

本地使用Benchmark须要引入以下三个文件：

<script src="lodash.js"></script>
<script src="platform.js"></script>
<script src="benchmark.js"></script>

jsPerf 的使用

jsPerf 提供了一个简便的方式来建立和共享测试用例，并能够比较不一样JavaScript代码段的性能。jsPerf也是基于Benchmark来运行的。

打开jsPerf站点：http://jsperf.com/，先将必填的项目填了。其中，slug是短名称，会生成一个网址，所以不可与别人的重复。而后在Code snippets to compare 区域填入title和用于测试的code。最后点击save test case 完成验证便可。浏览器会自动跳转到测试页面

Async选项框是用来测试一些异步调用的性能的，咱们的代码没有使用异步方法，因此没必要勾选。

运行测试

点击“Run tests”按钮开始测试两种算法的性能。建议在运行性能测试以前，关闭无关的浏览器页面，关闭其余程序，退出没必要要的后台进程，以保证结果不受其余环境的影响。你也能够经过点击个别测试用例的名字单独运行这个例子

点击该连接查看性能比较：http://jsperf.com/huang

jsPerf还会统计全部运行过这个测试用例的浏览器的比较结果，显示在下方的Browserscope区域，能够经过它直观地看出各个版本浏览器的性能横向和纵向比较状况。

能够看到Firefox下的执行速度明显高于Chrome

查看别人的测试用例

咱们能够经过 http://jsperf.com/browse 浏览最新提交的250项最新测试用例。咱们也可使用底部的Revisions来查看不一样的版本，也就是不一样浏览器的测试用例状况。

总结

John Resig 在其博文 JavaScript 基准测试的质量 中提到，应该尽可能考虑到每一个测试结果的偏差并去减少它。扩大测试的样本值，健全的测试执行，都可以起到减小偏差的做用。