Benchmark: classNames - MeasureThat.net

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

Reduce
const classes = (...classNames) => classNames.reduce((res, className) => (className ? `${res} ${className}` : res), ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Filter and join
const classes = (...classNames) => classNames.filter(Boolean).join(' '); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Join and replace false
const classes = (...classNames) => classNames.join(' ').replace('false', ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Join only valid strings
const classes = (...classNames) => classNames.join(' '); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 ? 'nope' : null, undefined, true ? 'this goes in' : null, "false"===false ? "get out" : null, "another class", "another string"); }
Reduce but no template string
const classes = (...classNames) => classNames.reduce((res, className) => (className ? res + " " + className : res), ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Reduce but with optimized parameters
const classes = (...classNames) => classNames.reduce((res, className) => (className ? `${res} ${className}` : res), ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub another class another string', 1 === 2 && 'nope', true && 'this goes in', "false"===false && "get out"); }
Push valid to array and join
const classes = (...classNames) => { const res = []; classNames.forEach((cn) => { if (cn){ res.push(cn); } }) return res.join(" "); } for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Filter and reduce
const classes = (...classNames) => classNames.filter(Boolean).reduce((res, className) => `${res} ${className}`, ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Reduce but no leading space
const classes = (...classNames) => classNames.reduce((res, className) => (className ? `${res}${res?" ":""}${className}` : res), ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }
Reduce but no leading space 2
const classes = (...classNames) => classNames.reduceRight((res, className) => (className ? `${className} ${res}` : res), ''); for (let i = 0; i<100; i++){ const test1 = classes('hello bla blub', 1 === 2 && 'nope', undefined, true && 'this goes in', "false"===false && "get out", "another class", "another string"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reduce
Filter and join
Join and replace false
Join only valid strings
Reduce but no template string
Reduce but with optimized parameters
Push valid to array and join
Filter and reduce
Reduce but no leading space
Reduce but no leading space 2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 hours ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Reduce	192728.0 Ops/sec
Filter and join	86013.7 Ops/sec
Join and replace false	84137.9 Ops/sec
Join only valid strings	153744.8 Ops/sec
Reduce but no template string	147800.0 Ops/sec
Reduce but with optimized parameters	282750.8 Ops/sec
Push valid to array and join	90827.7 Ops/sec
Filter and reduce	88922.9 Ops/sec
Reduce but no leading space	152753.2 Ops/sec
Reduce but no leading space 2	150806.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 8 hours ago):

LLMs can make mistakes. Check important info.

The provided benchmark tests different implementations of a JavaScript function named `classes`, which generates a string of class names for HTML elements based on various input parameters. The primary goal of this benchmark is to assess the performance of these different implementations in terms of execution speed, specifically measuring how many times each implementation can run within one second.

### Options Compared

1. **Reduction with Template Strings** (`Test Name: Reduce`):
   ```javascript
   const classes = (...classNames) => classNames.reduce((res, className) => (className ? `${res} ${className}` : res), '');
   ```
   This method uses `reduce` and template strings to concatenate class names, which is readable but may introduce additional overhead due to string concatenation using template literals.

2. **Filtering and Joining** (`Test Name: Filter and join`):
   ```javascript
   const classes = (...classNames) => classNames.filter(Boolean).join(' ');
   ```
   The implementation filters out falsy values before joining them into a single string. This method is efficient for most use cases, but it creates an intermediate array from the filtered class names.

3. **Joining and Replacing Falses** (`Test Name: Join and replace false`):
   ```javascript
   const classes = (...classNames) => classNames.join(' ').replace('false', '');
   ```
   This implementation joins all class names and then replaces instances of the string `'false'`. This approach unnecessarily constructs a large string only to replace parts of it later, possibly making it less performant.

4. **Join Only Valid Strings** (`Test Name: Join only valid strings`):
   ```javascript
   const classes = (...classNames) => classNames.join(' ').replace('false', '');
   ```
   This method uses a ternary operator to include only valid truthy strings during the construction of the class name list, leading to a potentially cleaner approach without creating extra arrays but adding complexity.

5. **Reduce without Template Strings** (`Test Name: Reduce but no template string`):
   ```javascript
   const classes = (...classNames) => classNames.reduce((res, className) => (className ? res + " " + className : res), '');
   ```
   Similar to the first option but avoids template literals in favor of concatenating strings with the `+` operator. This may be less readable and potentially slower than template literals due to repeated string allocation.

6. **Optimized Parameters for Reduce** (`Test Name: Reduce but with optimized parameters`):
   ```javascript
   const classes = (...classNames) => classNames.reduce((res, className) => (className ? `${res} ${className}` : res), '');
   ```
   This version uses more specific class names as parameters upfront, which allows it to handle fewer overall values, potentially improving performance.

7. **Push Valid to Array and Join** (`Test Name: Push valid to array and join`):
   ```javascript
   const classes = (...classNames) => {
     const res = [];
     classNames.forEach((cn) => { if (cn) { res.push(cn); } });
     return res.join(" ");
   };
   ```
   In this approach, valid class names are pushed into an array and then joined. This method improves readability and handles input correctly, but may introduce overhead due to the creation of an array.

8. **Filter and Reduce** (`Test Name: Filter and reduce`):
   ```javascript
   const classes = (...classNames) => classNames.filter(Boolean).reduce((res, className) => `${res} ${className}`, '');
   ```
   Combining both filtering and reducing, this method first filters valid classes and then reduces the output into a string. It balances between filtering invalid values and reducing the remaining ones, yet may perform less optimally due to creating intermediate arrays.

### Performance Observations

According to the benchmark results, the following observations can be made regarding execution speeds:

- **Best Performer**: The `Reduce but with optimized parameters` implementation showed the highest execution rate (312,997.56 executions per second). This indicates that specifying class names directly can improve performance.
- **Reasonable Choices**: `Filter and join` and `Reduce` implementations performed reasonably well but seemed less optimal than those employing reduced parameters or direct concatenation.
- **Lower Performers**: The implementations utilizing `join` followed by `replace` or additional filtering generally had the slowest execution rates, indicating higher overhead in these cases.

### Considerations

- **Readability vs. Performance**: There is often a trade-off between code readability and execution speed. While optimized code may run faster, it can be less intuitive for developers maintaining it. Function like `filter(Boolean)` offer clarity but may come with performance costs.
- **Array vs. String Handling**: The use of arrays can make the code more manageable and readable but introduces the performance overhead of memory allocation and garbage collection. Direct string manipulation tends to be faster but risks creating less clean code.

### Alternatives

Other alternatives for generating class names include using libraries like:
- **classnames**: A popular utility for conditionally joining class names.
- **lodash's `_.join`**: Although mainly for array manipulation, supporting class-name string construction can be performant.

These libraries offer added functionality like handling various logical conditions neatly, which might be worth adopting for larger projects with more complex class management needs. However, it's essential to evaluate performance implications when using external libraries due to potential overhead.

Related benchmarks:

classNames (version: 10)

Comparing performance of: Reduce vs Filter and join vs Join and replace false vs Join only valid strings vs Reduce but no template string vs Reduce but with optimized parameters vs Push valid to array and join vs Filter and reduce vs Reduce but no leading space vs Reduce but no leading space 2

Created: 10 hours ago by: Registered User

Jump to the latest result

Reduce

Filter and join

Join and replace false

Join only valid strings

Reduce but no template string

Reduce but with optimized parameters

Push valid to array and join

Filter and reduce

Reduce but no leading space

Reduce but no leading space 2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 8 hours ago):