Benchmark: classnames - clsx - classcat - merge-class-names

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.2/index.min.js'></script>
<script src='https://unpkg.com/clsx@latest/dist/clsx.min.js'></script>
<script type="module">
    import classcat from "https://unpkg.com/classcat?module"
    window.classcat = classcat
</script>
<script src='https://unpkg.com/browse/merge-class-names@1.4.2/dist/umd/index.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')
classcat
let result = window.classcat(str, obj, arr, 'test classname')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
classcat

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.42

Browser/OS: Chrome 106 on Windows

View result in a separate tab

Test name	Executions per second
classnames	1365370.1 Ops/sec
clsx	1998389.4 Ops/sec
classcat	2786361.8 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its various aspects.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark, specifically comparing three popular library functions for merging class names: `classnames`, `clsx`, and `classcat`. The benchmark prepares a simple string manipulation script with an object (`obj`) containing multiple style classes and an array (`arr`) of additional class names.

**Library and Purpose**

1. **Classnames**: Classnames is a lightweight library that provides a function for merging multiple class lists into one. It's designed to be fast, easy to use, and compatible with various browsers.
2. **Clsx**: Clsx (short for "ClassX") is another popular library for merging class names. It's similar to classnames but has some additional features, such as support for nested classes and better performance in certain situations.
3. **Classcat**: Classcat is a minimalist library that provides a simple way to merge multiple class lists into one. It's designed to be extremely lightweight and efficient.

**Options Compared**

The benchmark compares the execution times of each library function when merging three different sets of class names: `obj`, `arr`, and an additional string `'test classname'`. The options compared are:

* `classnames`: Merging class names using the `classNames` function.
* `clsx`: Merging class names using the `clsx` function.
* `classcat`: Merging class names using the `classcat` function.

**Pros and Cons of Each Approach**

1. **Classnames**:
	* Pros: Lightweight, easy to use, and compatible with various browsers.
	* Cons: May not perform as well in certain situations, such as when dealing with a large number of classes or nested classes.
2. **Clsx**:
	* Pros: Better performance than classnames in some cases, support for nested classes, and additional features.
	* Cons: Slightly larger footprint than classnames, may be overkill for simple use cases.
3. **Classcat**:
	* Pros: Extremely lightweight and efficient, easy to use, and supports a wide range of browsers.
	* Cons: May not perform as well as clsx in certain situations, limited features compared to other libraries.

**Device Platform and Browser Considerations**

The benchmark is run on a Chrome 106 browser with a Windows desktop device. The results may vary depending on the specific device platform and browser being used. For example:

* Mobile devices or older browsers may exhibit different performance characteristics due to differences in JavaScript engine optimization, caching, or other factors.
* Different operating systems (e.g., macOS, Linux) may also affect performance.

**Special JS Feature or Syntax**

None of the libraries use any special JavaScript features or syntax that would impact the benchmark's results. The code is straightforward and uses standard JavaScript functions and data structures.

**Alternatives**

Other alternatives for merging class names in JavaScript include:

* Using a simple string concatenation approach, which can be less efficient than using a dedicated library.
* Utilizing other libraries like `merge-class-names` (not used in this benchmark) or `classnames` variants with additional features.
* Implementing custom merge logic, which can lead to more complex code and potentially slower performance.

Related benchmarks:

classnames - clsx - classcat - merge-class-names (version: 0)

Comparing performance of: classnames vs clsx vs classcat

Created: 2 years ago by: Guest

Jump to the latest result

classnames

clsx

classcat

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