Benchmark: ClassList v7 - MeasureThat.net

Script Preparation code:

var obj = {};

for (i = 1000; i > 0; i--) {
 	obj[i] = {
    container: {
      sm: {
        layout: ['p-4'],
        presentation: 'bg-blue-100',
      },
      md: ['md:bg-green-100', 'md:p-6'],
      lg: ['lg:bg-yellow-100', 'lg:p-8'],
      xl: ['xl:bg-red-100', 'xl:p-10'],
      xxl: 'xxl:bg-gray-100 xxl:p-12',
    },
    heading: {
      sm: [ 'bg-yellow-200', 'md:bg-green-200' ],
      md: ( ()=> 'md:bg-yellow-200' )(),
    },
    paragraph: ['bg-gray-300','p-12'],
    box: 'bg-yellow-400',
    button: {},
  };
}

Tests:

Recursive flatten v1
function ClassList(collection = {}) { const result = {}; function flatten(node, str) { const nodeType = Object.prototype.toString.call(node); switch (nodeType) { case '[object String]': { str += node + ' '; break; } case '[object Array]': { str += node.join(' ') + ' '; break; } case '[object Object]': { for (const key in node) { str += flatten(node[key], ''); } break; } } return str; } for (const key in collection) { result[key] = flatten(collection[key], ''); } return result; } ClassList(obj);
Recursive flatten v2
function ClassList(collection = {}) { const result = {}; function flatten(node, arr) { const nodeType = Object.prototype.toString.call(node); switch (nodeType) { case '[object String]': { arr.push(node); break; } case '[object Array]': { arr.push(...node); break; } case '[object Object]': { for (const key in node) { flatten(node[key], arr); } break; } } return arr; } for (const key in collection) { result[key] = flatten(collection[key], []).join(' '); } return result; } ClassList(obj);
Recursive flatten v3 (no spread)
function ClassList(collection = {}) { const result = {}; function flatten(node, arr) { const nodeType = Object.prototype.toString.call(node); switch (nodeType) { case '[object String]': { arr.push(node); break; } case '[object Array]': { arr.push(node); break; } case '[object Object]': { for (const key in node) { flatten(node[key], arr); } break; } } return arr; } for (const key in collection) { result[key] = flatten(collection[key], []).join(' '); } return result; } ClassList(obj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Recursive flatten v1
Recursive flatten v2
Recursive flatten v3 (no spread)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15

Browser/OS: Safari 13 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
Recursive flatten v1	212.3 Ops/sec
Recursive flatten v2	225.9 Ops/sec
Recursive flatten v3 (no spread)	203.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript functions, specifically `ClassList(collection = {})`, is an interesting exercise.

**What is being tested?**

The benchmark tests three different implementations of the `flatten` function within the `ClassList` function. The main difference between these implementations lies in how they handle array elements:

1. **Recursive flatten v1**: This implementation uses a recursive approach, where each element of the nested object is flattened by calling the `flatten` function on it.
2. **Recursive flatten v2**: This implementation also uses a recursive approach, but with an additional optimization: it appends elements to an array instead of concatenating strings using `join(' ')`.
3. **Recursive flatten v3 (no spread)**: This implementation lacks the array append optimization and still uses recursion.

**Options being compared**

The benchmark is comparing the performance of these three different implementations:

* Recursive approach with string concatenation (`join(' ')`)
* Recursive approach with array appending
* Recursive approach without array appending

**Pros and Cons**

Here's a brief summary of each implementation's pros and cons:

1. **Recursive flatten v1 (string concatenation)**:
	* Pros: Simple to understand, easy to implement.
	* Cons: Inefficient for large arrays or deep nesting, as string concatenation can lead to memory allocation issues.
2. **Recursive flatten v2 (array appending)**:
	* Pros: More efficient than the first implementation, especially for larger arrays or deeper nesting.
	* Cons: Requires an array to accumulate elements, which might increase memory usage.
3. **Recursive flatten v3 (no spread)**:
	* Pros: None explicitly mentioned in the benchmark code, but it's likely that this implementation is the most straightforward and easy to understand.
	* Cons: Likely less efficient than `v2` due to string concatenation.

**Other considerations**

When implementing recursive functions, consider the following:

* **Memory allocation**: Recursive function calls can lead to increased memory usage due to repeated allocations.
* **Cache locality**: Efficient use of cache memory is crucial for performance, as it reduces memory access latency.
* **Branch prediction**: Optimizations that reduce branch prediction errors can improve performance.

**Alternatives**

If you're interested in exploring alternative approaches, consider:

1. **Iterative approach**: Instead of recursion, implement the `flatten` function using a loop or a stack-based implementation.
2. **Memoization**: Store the results of expensive function calls and reuse them when needed to avoid redundant computations.
3. **Caching**: Implement caching mechanisms to store intermediate results and reduce computation time.

Keep in mind that the performance benefits of these alternatives may not be significant, especially for simple functions like `ClassList`. However, they can provide valuable insights into optimization techniques and potential areas for improvement.

Related benchmarks:

ClassList v7 (version: 0)

Comparing performance of: Recursive flatten v1 vs Recursive flatten v2 vs Recursive flatten v3 (no spread)

Created: 3 years ago by: Guest

Jump to the latest result

Recursive flatten v1

Recursive flatten v2

Recursive flatten v3 (no spread)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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