jQuery Map vs Array Map

JavaScript performance comparison

Test case created by Nic

Preparation code

<ul class="tabs tabs-centered show-js hide-no-js">
  <li>
    <a data-type="spirits" href="#">All Spirits (<span>1</span>)</a>
  </li>
  <li>
    <a data-type="mixers" href="#">All Mixers (<span>0</span>)</a>
  </li>
  <li class="is-active">
    <a data-type="garnishes" href="#">All Garnishes (<span>1</span>)</a>
  </li>
  <li>
    <a data-type="liquers" href="#">All Liquers (<span>0</span>)</a>
  </li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery Map
this.dataTypes = $('.tabs [data-type]').map(function() {
  return $(this).data('type')
}).get();
pending…
Array Map
this.dataTypez = $('.tabs [data-type]').toArray().map(function(ele) {
  return $(ele).data('type')
});
pending…

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

Compare results of other browsers

0 comments

Add a comment