Benchmark: slice vs filter - MeasureThat.net

Script Preparation code:

var test=Array.from({length: 100},()=>Math.random())

Tests:

slice
[...test.slice(0,50),...test.slice(51)]
filter
test.filter((e,i)=>i!=50)

Historical Performance Data aggregated from 85 community runs

Desktop Results:

Chrome 71 runs

filter

3.0M/s

slice

1.9M/s

Fastest: filter (1.6x faster)

View exact numbers

✓ filter: 3,045,794 ops/sec
• slice: 1,932,817 ops/sec

Firefox 14 runs

filter

2.4M/s

slice

1.2M/s

Fastest: filter (2.0x faster)

View exact numbers

✓ filter: 2,372,830 ops/sec
• slice: 1,205,686 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
slice
filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0

Browser/OS: Firefox 147 on Windows

View result in a separate tab

filter

2.5M/s

slice

1.3M/s

View exact numbers

Test name	Executions per second
✓ filter	2,470,108 Ops/sec
slice	1,293,488 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what is being tested.

**Benchmark Definition:**

The benchmark definition represents a JavaScript microbenchmark that compares two approaches: `slice` and `filter`. The script preparation code creates an array of 100 random numbers, which is used as input for both tests.

**Script Preparation Code:**
```javascript
var test = Array.from({length: 100}, () => Math.random());
```
This line creates an array of 100 random numbers using the `Array.from()` method and the spread operator (`...`).

**Html Preparation Code:**

There is no HTML preparation code provided, which means that the benchmark does not rely on any specific HTML structure or content.

**Individual Test Cases:**

The benchmark consists of two test cases:

1. **Slice:**
```javascript
Benchmark Definition: [...test.slice(0,50), ...test.slice(51)]
```
This test case uses the `slice()` method to split the array into two parts: one with the first 50 elements and another with the remaining 50 elements. The `...` operator is used to concatenate these two arrays.

2. **Filter:**
```javascript
Benchmark Definition: test.filter((e, i) => i != 50)
```
This test case uses the `filter()` method to create a new array that includes only the elements at indices other than 50.

**Comparison:**

The benchmark compares the execution times of these two approaches:

* `slice()`: A simple, optimized array splitting function.
* `filter()`: An array filtering function that creates a new array by iterating over the original array and applying a callback function to each element.

**Pros and Cons:**

1. **Slice:**
	* Pros:
		+ Fast and efficient (optimized implementation).
		+ Simple and intuitive API.
	* Cons:
		+ May not be suitable for large arrays, as it creates two new arrays.
2. **Filter:**
	* Pros:
		+ Flexible and versatile (can be used to filter multiple elements or conditions).
		+ Can be optimized using techniques like caching and memoization.
	* Cons:
		+ Slower than `slice()` due to the overhead of iterating over the array.
		+ May not be suitable for large arrays, as it creates a new array.

**Library:**

There is no explicit library mentioned in the benchmark definition. However, both `Array.prototype.slice()` and `Array.prototype.filter()` are built-in methods that are available on all JavaScript arrays.

**Special JS Feature/Syntax:**

The benchmark uses modern JavaScript features such as:

* Spread operator (`...`) to concatenate arrays.
* Arrow function syntax (`(e, i) => i != 50`) for the filter callback function.

**Other Alternatives:**

If you were to rewrite this benchmark using other approaches, some alternatives could be:

1. **Splice()**: Instead of creating two new arrays, `slice()` could use `splice()` to remove elements from the original array.
2. **Map()**: The `filter()` approach could be replaced with a `map()` function that creates a new array by applying a callback function to each element and filtering out the unwanted elements.
3. **Custom implementation**: A custom implementation using loops or other algorithms could also be used to compare the performance of different approaches.

Keep in mind that this benchmark is specific to JavaScript arrays and may not generalize well to other data structures or programming languages.

slice vs filter (version: 0)

Comparing performance of: `slice vs filter`

Created: 8 years ago by: Guest

Go to the latest result

slice

filter

Historical Performance Data aggregated from 85 community runs

Desktop Results:

Chrome 71 runs

Firefox 14 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

slice vs filter (version: 0)

Comparing performance of: slice vs filter

Created: 8 years ago by: Guest

Go to the latest result

slice

filter

Historical Performance Data aggregated from 85 community runs

Desktop Results:

Chrome 71 runs

Firefox 14 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: `slice vs filter`