Benchmark: JS Filter Test - MeasureThat.net

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
<script>
  _lodash = _.noConflict();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Script Preparation code:

var angularFilter = angular.injector(['ng']).get('$filter')('filter');

// Add array.where implementation
Array.prototype.where = Array.prototype.where || function(predicate) {
  var results = [],
    len = this.length,
    i = 0;

  for (; i < len; i++) {
    var item = this[i];
    if (predicate(item)) {
      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;
}());

grepAlone = function( elems, callback, invert ) {
		var callbackInverse,
			matches = [],
			i = 0,
			length = elems.length,
			callbackExpect = !invert;

		// Go through the array, only saving the items
		// that pass the validator function
		for ( ; i < length; i++ ) {
			callbackInverse = !callback( elems[ i ], i );
			if ( callbackInverse !== callbackExpect ) {
				matches.push( elems[ i ] );
			}
		}

		return matches;
};

Array.prototype.find = function(predicate) {
  if (this == null) {
    throw new TypeError('Array.prototype.find called on null or undefined');
  }
  if (typeof predicate !== 'function') {
    throw new TypeError('predicate must be a function');
  }
  var list = Object(this);
  var length = list.length >>> 0;
  var thisArg = arguments[1];
  var value;

  for (var i = 0; i < length; i++) {
    value = list[i];
    if (predicate.call(thisArg, value, i, list)) {
      return value;
    }
  }
  return undefined;
};

function getValue(el) {
	return el - 50 > 31;
}

Tests:

$.grep
$.grep(array, getValue);
array.find
array.find(getValue);
array.where
array.where(getValue);
angular.$filter
angularFilter(array, getValue);
array.filter
array.filter(getValue);
lodash.filter
_lodash.filter(array, getValue);
underscore.filter
_.filter(array, getValue);
grepAlone
grepAlone(array, getValue);

Historical Performance Data aggregated from 30 community runs

Desktop Results:

Chrome 25 runs

array.where

4.4M/s

$.grep

3.1M/s

grepAlone

3.0M/s

angular.$filter

2.3M/s

underscore.filter

1.3M/s

array.filter

1.2M/s

array.find

1.2M/s

lodash.filter

1.1M/s

Fastest: array.where (4.1x faster)

View exact numbers

✓ array.where: 4,406,960 ops/sec
• $.grep: 3,100,420 ops/sec
• grepAlone: 3,049,837 ops/sec
• angular.$filter: 2,277,468 ops/sec
• underscore.filter: 1,276,318 ops/sec
• array.filter: 1,190,908 ops/sec
• array.find: 1,187,693 ops/sec
• lodash.filter: 1,085,512 ops/sec

Firefox 5 runs

array.find

8.3M/s

grepAlone

4.7M/s

array.where

4.6M/s

lodash.filter

4.0M/s

array.filter

3.9M/s

underscore.filter

3.9M/s

$.grep

3.8M/s

angular.$filter

2.1M/s

Fastest: array.find (4.0x faster)

View exact numbers

✓ array.find: 8,311,051 ops/sec
• grepAlone: 4,702,064 ops/sec
• array.where: 4,625,873 ops/sec
• lodash.filter: 3,979,714 ops/sec
• array.filter: 3,899,860 ops/sec
• underscore.filter: 3,851,318 ops/sec
• $.grep: 3,762,176 ops/sec
• angular.$filter: 2,102,092 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
$.grep
array.find
array.where
angular.$filter
array.filter
lodash.filter
underscore.filter
grepAlone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Linux

View result in a separate tab

array.filter

4.7M/s

array.where

4.4M/s

$.grep

4.0M/s

grepAlone

2.8M/s

angular.$filter

1.3M/s

underscore.filter

821K/s

array.find

725K/s

lodash.filter

526K/s

View exact numbers

Test name	Executions per second
✓ array.filter	4,727,769 Ops/sec
array.where	4,389,146 Ops/sec
$.grep	3,953,564 Ops/sec
grepAlone	2,789,346 Ops/sec
angular.$filter	1,287,848 Ops/sec
underscore.filter	820,523 Ops/sec
array.find	725,484 Ops/sec
lodash.filter	526,165 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark measures the performance of different filtering methods on an array of 100 numbers. The goal is to find (or filter) elements that satisfy a given condition (in this case, `el - 50 > 31`).

**Tested Methods**

1. **$.grep(array, getValue)**: Uses jQuery's `grep()` method.
2. **array.find(getValue)**: Uses JavaScript's built-in `find()` method.
3. **array.where(getValue)**: Implements a custom `where()` method on the array prototype.
4. **angularFilter(array, getValue)**: Uses AngularJS's `$filter` service to filter the array.
5. **grepAlone(array, getValue)**: A custom implementation of filtering using a single function (similar to jQuery's `grep()`).
6. **_lodash.filter(array, getValue)** and **_.filter(array, getValue)**: Uses Lodash's `filter()` method.
7. **array.filter(getValue)**: Uses JavaScript's built-in `filter()` method.
8. **underscore.filter**: Uses UnderSCORE.js's `filter()` function.

**Comparison**

The benchmark measures the performance of each method by executing them 100 million times and reporting the number of executions per second.

**Pros and Cons**

1. **$.grep(array, getValue)**:
	* Pros: Simple, widely supported, and easy to use.
	* Cons: jQuery is a large library that may not be necessary for this specific use case.
2. **array.find(getValue)**:
	* Pros: Native JavaScript method, efficient, and simple.
	* Cons: May be slower than other methods due to its nature (iterating over the array).
3. **array.where(getValue)**:
	* Pros: Custom implementation allows for fine-grained control and potential optimization.
	* Cons: Adds complexity to the codebase and may not be widely supported or understood.
4. **angularFilter(array, getValue)**:
	* Pros: AngularJS provides a robust filtering mechanism that can be reused throughout the application.
	* Cons: May introduce unnecessary overhead due to the Angular framework's functionality.
5. **grepAlone(array, getValue)**:
	* Pros: Simple and efficient implementation similar to jQuery's `grep()`.
	* Cons: May not be as widely supported or well-understood as other methods.
6. **_lodash.filter(array, getValue)** and **_.filter(array, getValue)**:
	* Pros: Lodash provides a robust filtering mechanism that can be reused throughout the application.
	* Cons: Requires the Lodash library, which may add unnecessary overhead.
7. **array.filter(getValue)**:
	* Pros: Native JavaScript method, efficient, and simple.
	* Cons: May not be as widely supported or well-understood as other methods.
8. **underscore.filter**:
	* Pros: UnderSCORE.js provides a robust filtering mechanism that can be reused throughout the application.
	* Cons: Requires the UnderSCORE.js library, which may add unnecessary overhead.

The benchmark results will provide insight into the performance characteristics of each method, allowing users to choose the best approach for their specific use case.

JS Filter Test (version: 2) Benchmark.js

Comparing performance of: `$.grep vs array.find vs array.where vs angular.$filter vs array.filter vs lodash.filter vs underscore.filter vs grepAlone`

Created: 9 years ago by: Registered User

Go to the latest result

$.grep

array.find

array.where

angular.$filter

array.filter

lodash.filter

underscore.filter

grepAlone

Historical Performance Data aggregated from 30 community runs

Desktop Results:

Chrome 25 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

JS Filter Test (version: 2) Benchmark.js

Comparing performance of: $.grep vs array.find vs array.where vs angular.$filter vs array.filter vs lodash.filter vs underscore.filter vs grepAlone

Created: 9 years ago by: Registered User

Go to the latest result

$.grep

array.find

array.where

angular.$filter

array.filter

lodash.filter

underscore.filter

grepAlone

Historical Performance Data aggregated from 30 community runs

Desktop Results:

Chrome 25 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `$.grep vs array.find vs array.where vs angular.$filter vs array.filter vs lodash.filter vs underscore.filter vs grepAlone`