Array.filter vs jQuery.filter vs custom Array.where vs inline filtering

JavaScript performance comparison

Revision 5 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
Benchmark.prototype.setup = function() {
    // Add array.where implementation
    Array.prototype.where = Array.prototype.where || function(predicate) {
      var results = [],
          len = this.length,
          i = 0;
   
      while(i < len) {
        var item = this[i++];    
        predicate(item, i) && results.push(item);    
      }
   
      return results;
    };
   
    // Generate test array
    window.array = (function() {
      var arr = [];
      for (var i = 0; i < 100; ++i) {
        arr.push(i);
      }
   
      return arr;
    }());
   
    //save instance of jQuery array
    window.jqArray = jQuery(array);
};
</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Array.filter
array.filter(function(el) {
  return el % 2 === 0;
});
pending…
jQuery.filter
jQuery(array).filter(function(n, el) {
  return el % 2 === 0;
});
pending…
Array.where
array.where(function(el) {
  return el % 2 === 0;
});
pending…
jQuery.filter (saved instance of jQuery(array) )
jqArray.filter(function(n, el) {
  return el % 2 === 0;
});
pending…
inline filtering
var ret = [];
for (var i=0,l=array.length;i<l;i++) {
  var item = array[i];
  if (item % 2 === 0) ret.push(item);
}
return ret;
pending…
inline filtering w/o item var
var ret = [];
for (var i=0,l=array.length;i<l;i++) {
  if (array[i] % 2 === 0) ret.push(array[i]);
}
return ret;
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment