Benchmark: flattt - MeasureThat.net

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var arr = [{
        permissions: [{
                target_type: 'tag',
                operations: ['edit'],
            },
            {
                target_type: 'log_entry',
                operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'],
            },
            {
                target_type: 'log_entry',
                operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'],
            },
            {
                target_type: 'log_entry',
                operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'],
            },
            {
                target_type: 'log_entry',
                operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'],
            },
            {
                target_type: 'log_entry',
                operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'],
            },
            {
                target_type: 'log_entry',
                operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'],
            },
            {
                target_type: 'log_entry',
                operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'],
            },
            {
                target_type: 'log_entry',
                operations: ['list', 'view', 'list', 'view', 'list', 'view', 'list', 'view'],
            },
        ],
    },
    {
        permissions: [{
                target_type: 'log_entry',
                operations: ['list', 'view'],
            },
            {
                target_type: 'log_entry',
                operations: ['list', 'view'],
            },
        ],
    },
    {
        permissions: [{
                target_type: 'log_entry',
                operations: ['list', 'view'],
            },
            {
                target_type: 'log_entry',
                operations: ['list', 'view'],
            },
        ],
    },
    {
        permissions: [{
                target_type: 'log_entry',
                operations: ['list', 'view'],
            },
            {
                target_type: 'log_entry',
                operations: ['list', 'view'],
            },
        ],
    },
]

Tests:

map+flat
arr.map((m) => m.permissions).flat()
reduce+push
arr.reduce((acc, cur) => { acc.push(...cur.permissions); return acc; }, [])
reduce+concat
arr.reduce((accu, curr) => { return accu.concat([...curr.permissions]) }, [])
map+lodash
_.flatten(arr.map(m => m.permissions))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map+flat
reduce+push
reduce+concat
map+lodash

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript operations is crucial for optimizing code and identifying bottlenecks.

**Benchmark Definition JSON**

The provided benchmark definition json represents four individual test cases:

1. `arr.map((m) => m.permissions).flat()`: This test case measures the performance of using `map()` followed by `flat()`.
2. `arr.reduce((acc, cur) => {\r\n  acc.push(...cur.permissions);\r\n  return acc;\r\n}, [])`: This test case measures the performance of using `reduce()` with a callback function that pushes permissions into an accumulator array.
3. `arr.reduce((accu, curr) => {\r\n  return accu.concat([...curr.permissions])\r\n}, [])`: Similar to the previous one, but uses `concat()` instead of `push()`.
4. `_.flatten(arr.map(m => m.permissions))`: This test case measures the performance using a library function (`flatten()`) from Lodash.

**Comparison of Options**

The options compared are:

1. Using `map()` followed by `flat()`
2. Using `reduce()` with `push()`
3. Using `reduce()` with `concat()`
4. Using a library function (`flatten()`) from Lodash

Each approach has its pros and cons:

* **Using `map()` followed by `flat()`**:
	+ Pros: Efficient way to flatten an array.
	+ Cons: Creates a new array using `map()`, which can be memory-intensive for large arrays, and then flattens it using `flat()`.
* **Using `reduce()` with `push()`**:
	+ Pros: Can handle variable-length arrays and avoids creating a new array.
	+ Cons: May have performance overhead due to the callback function and `push()` operation.
* **Using `reduce()` with `concat()`**:
	+ Pros: Similar to `push()`, but uses an immutable array.
	+ Cons: Creates multiple intermediate arrays, which can be memory-intensive for large arrays.
* **Using a library function (`flatten()`) from Lodash**:
	+ Pros: Efficient and concise way to flatten an array.
	+ Cons: Requires importing an additional library.

**Lodash Library**

The Lodash library is a popular JavaScript utility library that provides various functions for array manipulation, among other things. The `flatten()` function is used in one of the test cases to measure its performance.

**Latest Benchmark Result**

The latest benchmark result shows the performance of each test case across different browsers and devices:

| Test Name | Chrome 102 |
| --- | --- |
| reduce+push | 4324703.5 executions/second |
| map+lodash | 2371358.75 executions/second |
| reduce+concat | 1391013.625 executions/second |
| map+flat | 373257.78125 executions/second |

In this result, `reduce+push` performs the best, followed by `map+flat`, which is likely due to the efficient use of `map()` and `flat()`. The other test cases have lower performance, possibly due to the overhead of callback functions or library imports.

Overall, the benchmark results suggest that using `map()` followed by `flat()` is the most efficient approach for this specific problem. However, the best approach ultimately depends on the specific requirements and constraints of your project.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36

Browser/OS: Chrome 102 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
map+flat	373257.8 Ops/sec
reduce+push	4324703.5 Ops/sec
reduce+concat	1391013.6 Ops/sec
map+lodash	2371358.8 Ops/sec

Related benchmarks:

flattt (version: 0)

Comparing performance of: map+flat vs reduce+push vs reduce+concat vs map+lodash

Created: 2 years ago by: Guest

Jump to the latest result

map+flat

reduce+push

reduce+concat

map+lodash

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):