JSPerf-javascript代码性能测试利器

前言

在写一段代码的时候，很多小伙伴可能都会想要知道知道它的性能到底如何，和其他写法比起来哪个更快，但却苦于没有好用的工具，只能手动测试运行时间，这样一来是不方便，二来因为样本数太少误差较大，因此今天我要给大家推荐一个利器——JSPerf： https://jsperf.com。

介绍

JSPerf是一个在线的代码片段性能测试工具，可以对代码片段的性能进行测试，并输出比对结果。

原理

将给定的测试用例循环在指定环境下运行许多次，然后输入比对结果。

使用

刚进去的界面是这样的：

非常简单对吧，直截了当的表明本站的用途，可以看到创建测试用例需要用GitHub账户登录，这个不必多说，想必大部分程序员都有，登陆后，出现测试用例的输入界面：

其中，名字，邮箱以及github账户的url都是可选填写的，下面的title是测试用例的标题，slug是你的测试用例URL的路径，不能设置成已经存在的路径，输入框下说的很清楚。如果勾选published，那么你的测试用例将会被保存，别人可以通过你设定的Test case URL直接访问它，下面输入这个测试用例的描述，支持md语法。

下面这个Preparation code HTML在代码测试前会插入新建的一个html5文档的body标签中，在代码涉及dom操作时是非常有用的，例如我在其中填写这么一小段代码:

<div id="a"><p>testp>div>

那么在测试的代码中，我就能对这个div与p标签进行操作。同时还能在这里引入常用的库如JQuery等，也可以引入自己想要引入的库，只需用script标签即可搞定。

下面的Define setup for all tests也有类似作用，不过它是负责测试用例开始前的setup，即变量、函数的声明等，至于这个Define teardown for all tests则是测试用例每循环一次后执行的代码，不计入总时间。
下面就是每个测试用例的详情输入，包括标题，代码片段，还有异步代码的勾选框，可以增加测试用例书，这里注意，测试用例最少要两个，如果只想测试一段代码，可以将第二个测试用例的标题与内容全设为一个空格。

接下来，我们来对两组用例进行测试，来比对for循环与forEach操作数组的性能:
先填写测试用例，填写完成后，点击Save test case按钮，如下图：

现在可以看到测试用例的具体信息，在底下还可以进行评论，让我们点击Run tests看看结果：

可以看到forEach的每秒操作次数与for循环的差距巨大，显然for循环方式性能更好。
如果对结果不够确定，还可以多次测试查看结果，而且你可以将测试用例的URL直接分享给别人，别人可以直接进行测试，很方便吧！