jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

map join vs map non join

Benchmark created by tkone on December 18, 2013

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


<div id="list">
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
</div>

Setup

var $list = $('#list');

Test runner

Ready to run.

Test Ops/sec

map get

Testing in
Test	Ops/sec
map get	`var i = 0; var $divs = $list.find('div').map(function() { return i++; }); var is = $divs.get();`	ready
map self	`var i = 0; var ids = []; var $divs = $list.find('div').each(function() { ids.push(i++); });`	ready
get self	`var i = 0; var ids = []; var divs = $list.find('div').get(); for (var j = 0, l = divs.length; j < l; j++) { ids.push(i++); }`	ready

var i = 0;
var $divs = $list.find('div').map(function() {
  return i++;
});
var is = $divs.get();

ready

map self

var i = 0;
var ids = [];
var $divs = $list.find('div').each(function() {
  ids.push(i++);
});

ready

get self

var i = 0;
var ids = [];
var divs = $list.find('div').get();
for (var j = 0, l = divs.length; j < l; j++) {
  ids.push(i++);
}

ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1: published by tkone on December 18, 2013