Benchmark: ClassList v6 - 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 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 (no trim)
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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Recursive outer
Recursive flatten (no trim)

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 outer	112.9 Ops/sec
Recursive flatten (no trim)	213.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, `ClassList v6`, tests the performance of JavaScript functions related to handling ClassList API in various browsers. The benchmark consists of two individual test cases: `Recursive outer` and `Recursive flatten (no trim)`.

**What is tested on the provided JSON?**

The benchmark tests the performance of two different approaches to handle ClassList API:

1.  **Recursive outer**: This approach recursively checks each value in a collection, handling strings, arrays, and objects separately.
2.  **Recursive flatten (no trim)**: This approach recursively flattens an object by concatenating all values without removing leading/trailing whitespace.

**Options compared**

The two approaches differ in their recursive traversal strategy:

*   **Recursive outer**: Recursively checks each value in a collection, handling strings, arrays, and objects separately. It uses the `Object.values()` method to get an array of object values.
*   **Recursive flatten (no trim)**: Recursively flattens an object by concatenating all values without removing leading/trailing whitespace. It uses a nested loop structure to iterate over each property in the collection.

**Pros and Cons of each approach**

*   **Recursive outer**: Pros:

*   Easy to understand and implement.
    *   Handles different data types recursively.
    *
    Cons:

*   Can be slower due to recursive function calls.
    *   May not be suitable for very large datasets.
*
*   **Recursive flatten (no trim)**: Pros:

*   Faster performance compared to the recursive outer approach.
    *   Suitable for flattening large datasets.
*
*   **Other considerations**

*   The use of `Object.prototype.toString.call(node)` in both approaches can be optimized using a more efficient method, such as `node.constructor.name`.
    *   Both approaches do not handle edge cases, such as null or undefined values.

**Library and purpose**

The `ClassList` API is used in both test cases to manipulate the ClassList property of an element. The `ClassList` function returns an array-like object containing all class names that apply to a given element.

**Special JS feature or syntax**

Neither of the provided benchmark cases uses any special JavaScript features or syntax. However, it's essential to note that some browsers might optimize or implement specific ClassList-related features or optimizations that could impact performance in certain scenarios.

**Alternatives**

If you want to explore alternative approaches for handling ClassList API, consider the following options:

*   **Using `Array.prototype.concat()`**: Instead of using recursive functions, you can concatenate arrays and strings using `Array.prototype.concat()`.
*   **Utilizing `String.prototype.join()`**: Concatenate strings without recursion by using `String.prototype.join()`.
*   **Using a more efficient data structure**, such as a hash map, to store and retrieve class names.

Keep in mind that the performance difference between these approaches may vary depending on the specific use case and browser support.

Related benchmarks:

ClassList v6 (version: 0)

Comparing performance of: Recursive outer vs Recursive flatten (no trim)

Created: 3 years ago by: Guest

Jump to the latest result

Recursive outer

Recursive flatten (no trim)

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):