Benchmark: Classnames objects vs arrays

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.0/index.min.js'></script>

Script Preparation code:

var large = false
var inHeader = true

Tests:

classnames with array and multiple objects
let result = window.classNames([ 'm-dots-menu', { 'm-dots-menu--large': large }, { 'm-dots-menu--header-actions': inHeader }, ])
classnames with multiple params and and multiple objects
let result = window.classNames( 'm-dots-menu', { 'm-dots-menu--large': large }, { 'm-dots-menu--header-actions': inHeader }, )
classnames with multiple params and single object
let result = window.classNames('m-dots-menu', { 'm-dots-menu--large': large , 'm-dots-menu--header-actions': inHeader } )

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames with array and multiple objects
classnames with multiple params and and multiple objects
classnames with multiple params and single object

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classnames with array and multiple objects	3465343.0 Ops/sec
classnames with multiple params and and multiple objects	3962285.8 Ops/sec
classnames with multiple params and single object	4238233.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares different ways of using the `classnames` library, which is a popular JavaScript utility that helps manage conditional class names for HTML elements. This utility is often used in React applications, although it is applicable in any JavaScript project where dynamic class name building is needed. The library's primary purpose is to simplify the syntax of conditionally applying classes to elements based on certain conditions or states.

### Benchmark Overview

The benchmark consists of three test cases that explore the performance differences when using arrays versus multiple parameters and objects in the `classnames` function:

1. **Classnames with an Array and Multiple Objects**: 
   - **Test Case**: This test constructs a class name string by passing an array of class names, including dynamic classes that depend on the boolean variables `large` and `inHeader`.
   - **Pros**: Using an array can make it clear which classes are related and may enhance readability.
   - **Cons**: It may introduce additional complexity in parsing the array, possibly affecting performance.

2. **Classnames with Multiple Parameters and Multiple Objects**: 
   - **Test Case**: In this scenario, the class names are directly passed as arguments alongside multiple objects that conditionally determine whether certain classes should be included.
   - **Pros**: This pattern is straightforward and can be visually concise, especially when applying a set number of conditions.
   - **Cons**: The performance might vary depending on the number and nature of parameters.

3. **Classnames with Multiple Parameters and a Single Object**: 
   - **Test Case**: This uses direct parameters with a single object grouping all dynamic classes into one object.
   - **Pros**: It provides a clean way to manage classes that are dependent on numerous conditions without excess verbosity.
   - **Cons**: If the number of conditions increases, it may become cumbersome to handle in a single object.

### Performance Results

Based on the latest benchmark results, the third test case (classnames with multiple params and a single object) achieved the highest execution rate at approximately 4.24 million executions per second. This indicates that it could be the most efficient method among the three tested. The second test case, which uses multiple parameters and multiple objects, performed slightly lower, while the first test case, utilizing an array, had the lowest performance.

### Other Considerations

- **Readability vs. Performance**: The choice between arrays and objects often comes down to the balance between code readability and performance. While cleaner and easier code can help maintainability and collaboration, performance metrics are critical in high-traffic web applications.
  
- **Context of Usage**: In a React ecosystem, using `classnames` simplifies the handling of dynamic class applications due to its concise and expressive nature. Testing various methods allows developers to select the optimal approach for their use cases based on the requirements and performance constraints.

### Alternatives

While `classnames` is a widely-used library, there are alternatives that perform similar roles in handling class names, such as:

- **clsx**: A tiny utility that is faster and has a simpler API, good for handling dynamic class names without dependencies.
  
- **classnames/dedupe**: It extends the `classnames` library with functionality to remove duplicate class names, which can be useful in certain scenarios but adds overhead.

- **Vanilla JavaScript**: Developers might opt to use built-in JavaScript methods to conditionally create class strings without a dedicated library, though this could lead to less maintainable code.

### Conclusion

Understanding how different methodologies for handling class names perform can help software engineers make informed decisions tailored to their application's needs. The benchmark results indicate that using multiple parameters with a single object could be more performant, but other factors like readability and maintainability should also influence the choice of which method to implement.

Related benchmarks:

Classnames objects vs arrays (version: 1)

classnames objects vs arrays

Comparing performance of: classnames with array and multiple objects vs classnames with multiple params and and multiple objects vs classnames with multiple params and single object

Created: one month ago by: Guest

Jump to the latest result

classnames with array and multiple objects

classnames with multiple params and and multiple objects

classnames with multiple params and single object

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):