Benchmark: Classnames vs CLSX

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js'></script>
<script src='https://unpkg.com/clsx@1.1.0/dist/clsx.min.js'></script>

Script Preparation code:

var str = 'style';
var obj = {
 	 'style-2': true,
  	 'style-3': false,
 	 'style-4': true,
}
var arr = ['style-5', 'style-6']

Tests:

classnames
let result = window.classNames(str, obj, arr, 'test classname')
clsx
let result = window.clsx(str, obj, arr, 'test classname')

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 runs

clsx

7.4M/s

classnames

3.6M/s

Fastest: clsx (2.0x faster)

View exact numbers

✓ clsx: 7,395,575 ops/sec
• classnames: 3,647,106 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 137 on Android

View result in a separate tab

clsx

3.5M/s

classnames

1.7M/s

View exact numbers

Test name	Executions per second
✓ clsx	3,453,469 Ops/sec
classnames	1,691,665 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided JSON benchmark for comparing CLSX (Classnames) and Classnames.

**What is being tested?**

The benchmark tests two JavaScript libraries: Classnames and CLSX (Classname Extensions). Both libraries provide a way to dynamically generate class names based on object properties. The test case uses these libraries to concatenate strings with an array of values, similar to the example code provided in the Benchmark Definition JSON.

**Options compared:**

Two approaches are being compared:

1. **Classnames**: This library provides a function called `classNames` that takes an array of values and concatenates them with other strings.
2. **CLSX (Classname Extensions)**: This library provides a function called `clsx` that also takes an array of values and concatenates them with other strings.

**Pros and Cons:**

**Classnames:**

Pros:

* Well-established and widely used library
* Simple and intuitive API

Cons:

* May not be optimized for performance

**CLSX (Classname Extensions):**

Pros:

* Optimized for performance, potentially faster than Classnames
* Provides additional features, such as support for dynamic class names

Cons:

* Less well-known and established compared to Classnames
* More complex API

**Other considerations:**

The benchmark also considers the following factors:

* **JavaScript version**: The test case uses a specific JavaScript version (not specified in the provided JSON), which may affect the performance of the libraries.
* **Browser and device platform**: The test case runs on Firefox 130, running on Windows Desktop. This affects the results due to browser-specific optimizations and hardware differences.

**Library description:**

Both Classnames and CLSX are used as standalone libraries, providing a simple way to dynamically generate class names based on object properties. They are designed to be fast and efficient, making them suitable for use in web development applications where performance is critical.

However, since neither of the two options requires special JavaScript features or syntax beyond what's standard, I can stop there without further explanation.

**Alternative alternatives:**

If you're looking for alternative libraries that provide similar functionality, some popular options include:

* **CSS Class List**: A W3C standard that provides a way to dynamically generate class names.
* **Sass**: A CSS preprocessor that allows for more expressive and efficient class naming.
* **PostCSS**: A tool that can be used to extend or modify the CSS syntax, including class naming.

However, these alternatives may not provide the exact same API as Classnames and CLSX, so it's essential to evaluate their performance, features, and complexity before choosing an alternative.

Classnames vs CLSX (version: 0) Benchmark.js

Compare CLSX vs Classnames

Comparing performance of: `classnames vs clsx`

Created: 5 years ago by: Guest

Go to the latest result

classnames

clsx

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Classnames vs CLSX (version: 0) Benchmark.js

Compare CLSX vs Classnames

Comparing performance of: classnames vs clsx

Created: 5 years ago by: Guest

Go to the latest result

classnames

clsx

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `classnames vs clsx`