Benchmark.js

by paulwesterberg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Avg Ops/Sec</th>
      <th>RME</th>
      <th>Runs</th>
    </tr>
  </thead>
  <tbody id="cycleResults"></tbody>
</table>
<br/>
<div id="result"></div>
<br/>
<button id="btn">
Run Tests
</button>

CSS

table{
  border-collapse: collapse;
  margin: 2vmin 0;
  font-family:mono;
}

table, th, td{
  border:1px solid #000;
  padding:1vmin;
}

#cycleResults > * > :nth-child(3){
  text-align:right;
}

#cycleResults > * > :nth-child(5){
  text-align:center;
}

JavaScript

var input = "ABCDEFGHIJKLMNOPQRSTUVWXYZ-abcdefghijklmnopqrstuvwxyz";
//               
var convArray = [];
for (var i =0; i<127; i++)
{
  convArray[i]=String.fromCharCode(i);
}
for (var i =97; i<123; i++)
{
  convArray[i]=convArray[i-32];
}

const tests = [

  function ToUpper(){
    return input.toUpperCase();
  },

  function ToUpper2(){
    var output =""; 
    var underCount = 0;
    for(var x=0; x<input.length; x++)
    {
      var charNum = input.charCodeAt(x);
      underCount += charNum<127;
      output += convArray[charNum]; 
    }
    if (underCount < x)
    {
       return input.toUpperCase();
    }
    return output;
  },

];

var cycleResults = document.getElementById('cycleResults');
var result = document.getElementById('result');
var btn = document.getElementById('btn');

// BENCHMARK ====================
btn.onclick = function runTests(){

  btn.setAttribute('disabled', "true");
	cycleResults.innerHTML = '';
  result.textContent = 'Tests running...';
  
  var suite = new Benchmark.Suite;

  // add tests
  tests.forEach((test, index)=>
  	suite.add(test, {id: index+1, name:test.name})
  );
  
  // add listeners
  suite.on('cycle', function(event) {
  	console.log(event.target);
  
    let result = document.createElement('tr');
    
  	if(event.target.error){
    	console.log(event.target.error);
    	result.innerHTML = `
      	<td>${event.target.id}</td>
   		  <td style="color:#C00">${event.target.name}</td>
        <td colspan="3">${event.target.error.toString()}</td>
      `;
    	return cycleResults.appendChild(result);
    }
    
    result.innerHTML = `
    <td>${event.target.id}</td>
    <td>${event.target.name}</td>
    <td>${Math.floor(event.target.hz).toLocaleString()}</td>
    <td>±${event.target.stats.rme.toFixed(2)}%</td>
    <td>${event.target.stats.sample.length}</td>
    `;
    cycleResults.appendChild(result);
  })
  .on('complete', function() {
    result.textContent = 'Fastest is ' + this.filter('fastest').pluck('name');
   ...