javascript benchmark.js

Measuring Javascript Code Performance With Benchmark.js

Have you ever tested javascript code speed before. May be you write a custom code by yourself to calculate the elapsed to execute specific code block. In this tutorial we will look at a powerful javascript library to measure code performance.

 

The process of measuring code performance and speed is a Benchmark. In big languages such as Java or PHP to calculate the elapsed time that specific code could take to finish usually is to retrieve the start micro time before the script begin and the end micro time after the script has ended then subtract the end time from the start time and the resulting time is the elapsed time of this code.

 

In javascript we can test specific code blocks and get other more details this with a very powerful javascript library called Benchmark.js . The library inspired from the jsPerf website.

 

To use benchmark.js just download the library from this link or install with npm and import it in your code as shown here:

As shown above in order for the benchmark to work you will need two other dependencies which are lodash and platform.js

 

Writing Benchmark Tests

The benchmark library has many helpful functions to return accurate timers and other related results:

Benchmark Suite

This class enables you to define a test suite then add test cases to the suite.

The suite constructor can also take optional name and optional options object as follows:

 

To add test cases to the suite use Suite.add(name, callback, [, options={}]) where:

  • name: name to identify the test case must describe the test case for example if you want to test the String.indexOf you can write the test case name as String#IndexOf
  • callback: The actual test function
  • [, options={}]: The options object

 

Examples

using function only:

using name and function:

using name and function and options:

you can also emit the name and function and use options only:

 

After you add the test you can listen to events such as onCycle, onStart, onComplete, etc.

 

Finally run the test using Suite.run([options={}]) as follows:

or you can pass options as follows

 

Let’s see an example in action using a real world example: user registration form

To simulate the process of test suites, imagine we have a user registration form and we need to submit this form to the server using ajax request, so the process will have the following components:

1. Validate the form (test case 1)

2. Send the ajax request (test case 2)

3. Show Success or Failure messages (test case 3)

 

For the purpose of this tutorial i will assume that the ajax request call a json file and return some status response, in real world you have to process the data into the server.



index.html

As shown in the above we just created a simple form with main submit button and other buttons to validate the three test cases and the final button to test all cases.

Also we imported the required scripts the benchmark, along with lodash and platform.js. Next we imported two scripts which we will see next the first one of these is form.js will process the form validation and ajax and the second one is test.js will contain the test cases

 

create file js/form.js

 

Create a mock file response.json to simulate server response

Now if you click submit the form the validation messages appear, try to populate the form then submit again you will see a success response.

Now let’s setup the test cases so create a new file js/tests.js

As shown in the above code first we create a new instance from Benchmark.Suite then we add four for each test case as shown:

 

After we add the test cases we call suite.run() which run our test cases, then we set some listeners such as start to mark when the test start and cycle to get sequential loop of all tests along with their time, finally we filtered the tests using the filter method to get the fastest test:

 

Now if click on any of the test cases and then toggle the developer options > console in chrome and wait a couple of seconds you will see something like this:

Test suite started
validation#test x 1,538,841 ops/sec ±91.62% (9 runs sampled)
Test completed
Fastest is validation#test

This log shows each test name and number of operations per second

Share this: