How to profile Javascript now that JSPerf is down?

JavascriptPerformance

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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

EDIT: 2020-07-12 - v1 released

Solution 2 - Javascript

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>

Solution 3 - Javascript

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

Solution 4 - Javascript

I have incidentally come to know http://jsbench.github.io/.

It clearly reminds of good ol' jsperf.

You can save your benchmark, share them and they keep track of per-browser performance.

Here is one I just made up: For loop benchmark

(As a side note, you can only save a benchmark if you have a github account.)

Solution 5 - Javascript

Even though jsperf is online, if you still want to look at alternatives, I found https://jsben.ch/ to be quite useful and well designed.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLJ WadowskiView Question on Stackoverflow
Solution 1 - JavascriptMirko VukušićView Answer on Stackoverflow
Solution 2 - JavascriptGhetolayView Answer on Stackoverflow
Solution 3 - JavascriptvmgView Answer on Stackoverflow
Solution 4 - JavascriptSpyrytoView Answer on Stackoverflow
Solution 5 - JavascriptJoe ThomasView Answer on Stackoverflow