Benchmark: ClassList v5 - MeasureThat.net

Script Preparation code:

var obj = {};

for (i = 1000; i > 0; i--) {
  if (i%2 == 0) {
  	obj[i] = 'String';
  } else {
    obj[i] = [ 'Array of String', 'Array of String' ];
  }
}

Tests:

forEach
function ClassList(collection={}) { const classNames = {}; const keys = Object.keys(collection); keys.forEach((key) => { const innerCollection = collection[key]; const collectionCheck = Object.prototype.toString.call(innerCollection); switch (collectionCheck) { case '[object Object]': { const innerKeys = Object.keys(innerCollection); if (innerKeys.length === 0) { classNames[key] = ''; break; } let classList = []; innerKeys.forEach((innerKey) => { if (!innerCollection[innerKey] || !innerCollection[innerKey].length) { return; } const innerCollectionCheck = Object.prototype.toString.call(innerCollection[innerKey]); switch (innerCollectionCheck) { case '[object Array]': classList.push(...innerCollection[innerKey]); break; case '[object String]': classList.push(innerCollection[innerKey]); break; } }); classNames[key] = classList.reduce((acc, cl) => (acc += cl + ' '), ''); break; } case '[object Array]': classNames[key] = innerCollection.reduce((acc, cl) => (acc += cl + ' '), ''); break; case '[object String]': classNames[key] = innerCollection; break; } }); return classNames; } ClassList( obj );
Recursive outer
function rec(classList, key, collection = {} ) { return Object.values( collection ).reduce( (acc, col) => { const colCheck = Object.prototype.toString.call(col); switch (colCheck) { case '[object Object]': { if ( Object.keys(col).length === 0 ) { acc[key] = ''; break; } rec(classList, key, col ); break; } case '[object Array]': acc[key] += col.join(' ') + ' '; break; case '[object String]': acc[key] += col + ' '; break; } return acc; }, classList ); } function ClassList(collection = {}) { const keys = Object.keys(collection); return keys.reduce( (classList, key) => { switch (Object.prototype.toString.call(collection[key]) ) { case '[object Object]': { classList[key] = ''; if ( Object.keys(collection[key]).length === 0 ) { break; } rec(classList, key, collection[key] ); break; } case '[object Array]': classList[key] = collection[key].join(' ') + ' '; break; case '[object String]': classList[key] = collection[key] + ' '; break; } return classList; }, {} ); } ClassList( obj );
Recursive flatten
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], '').trimEnd(); } return result; } ClassList(obj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
Recursive outer
Recursive flatten

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases for you.

**Benchmark Definition:**
The benchmark is testing the performance of the `ClassList` function in JavaScript, which returns an object containing class names for each property in the input collection.

**Test Cases:**

1. **forEach**: This test case uses a traditional `for...of` loop with the `forEach` method to iterate over the properties of the input collection.
2. **Recursive outer**: This test case uses a recursive function called `rec` that takes three arguments: `classList`, `key`, and `collection`. The function iterates over the properties of the collection, calling itself recursively for each property value.
3. **Recursive flatten**: This test case uses another recursive function called `flatten` that takes two arguments: `node` and `str`. The function iterates over the properties of the input collection, concatenating class names to the `str` parameter.

**Options Compared:**

The benchmark is comparing three different approaches:

1. **Traditional loop**: The `forEach` test case uses a traditional `for...of` loop with the `forEach` method.
2. **Recursive outer**: The `Recursive outer` test case uses a recursive function that iterates over the properties of the collection, calling itself recursively for each property value.
3. **Recursive flatten**: The `Recursive flatten` test case uses another recursive function that iterates over the properties of the input collection, concatenating class names to the `str` parameter.

**Performance Results:**
The benchmark results show that:

* The `forEach` test case has a higher execution rate (2038.1083984375 executions per second) compared to the other two test cases.
* The `Recursive outer` test case has a lower execution rate (1353.2423095703125 executions per second), likely due to the recursive function calls and potential overhead.
* The `Recursive flatten` test case also has a lower execution rate (1549.6514892578125 executions per second) compared to the `forEach` test case.

**Interpretation:**
The results suggest that the traditional loop with `forEach` is the fastest approach, likely due to its simplicity and lack of overhead from recursive function calls. The recursive approaches (`Recursive outer` and `Recursive flatten`) are slower, possibly due to the additional function call overhead and potential memory allocation issues.

Please note that this analysis assumes a JavaScript engine that optimizes for performance, such as Safari's JavaScript engine used in the benchmark results.

Related benchmarks:

ClassList v5 (version: 0)

Comparing performance of: forEach vs Recursive outer vs Recursive flatten

Created: 5 years ago by: Guest

Jump to the latest result

forEach

Recursive outer

Recursive flatten

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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