Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to profile Javascript now that JSPerf is down? [closed]

As some of you probably noticed jsperf is down for some time. But I still need to profile my Javascripts. Is there any possibility to do comparison tests ideally without the help of an external software?

like image 676
LJ Wadowski Avatar asked Jun 08 '16 07:06

LJ Wadowski


3 Answers

I decided to build tool like this. First public beta is at https://jsbench.me

EDIT: 2020-07-12 - v1 released

like image 119
Mirko Vukušić Avatar answered Oct 19 '22 09:10

Mirko Vukušić


jsperf is based on benchmarkjs so using an online code editor (like jsfiddle, jsbin, plunker etc...) and including benchmarkjs as a library will do.

The only feature you won't have will be the compiled results for each browsers. This is just a temporary alternative.

Here is a jsfiddle template : https://jsfiddle.net/533hc71h/

But since we don't really care about HTML nor CSS I found plunker more suitable. Coupled with systemjs you can then separate your code into multiple files.

Here is the template : https://plnkr.co/edit/pJg5LsiSNqlc6immmGsW


Update

You really should only use those solution as quick temporary solution. As said on the comments for optimal result you had better run it locally, nowadays you can get a webserver like express or else running in sec.


Rather than "trick" Stack Overflow into allowing posting of these links, let's actually include some helpful code:

function test1() {

}

function test2() {

}

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

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

  btn.setAttribute('disable', true);
  cycleResults.innerHTML = '';
  result.textContent = 'Tests running...';

  var suite = new Benchmark.Suite;

  // add tests
  suite
    .add('test1', test1)
    .add('test2', test2)
    // add listeners
    .on('cycle', function(event) {
      var result = document.createElement('li');
      result.textContent = String(event.target);

      document.getElementById('cycleResults')
        .appendChild(result);
    })
    .on('complete', function() {
      result.textContent = 'Fastest is ' + this.filter('fastest').pluck('name');
      btn.setAttribute('disable', false);
    })
    // run async
    .run({
      'async': true
    });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<ul id='cycleResults'>

</ul>
<div id="result">

</div>
<br>
<button id="btn">
Run Tests
</button>
like image 73
Ghetolay Avatar answered Oct 19 '22 09:10

Ghetolay


There is also https://www.measurethat.net/ which allows you to create and run javascript benchmarks

like image 25
vmg Avatar answered Oct 19 '22 08:10

vmg