Benchmark: Classnames vs CLSX V2

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@1.2.1/dist/clsx.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/fast-classnames/umd.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 string
let result = window.classNames(str, 'test classname', 'WORKS', 'test classname', 'test classname')
clsx string
let result = window.clsx(str, 'test classname', 'WORKS','test classname', 'test classname', 'test classname')
classnames real case
let result = window.fastClassnames(str, true && 'test classname', false && 'WORKS', null && "failed", undefined && "null", Math.random() > 0.2 && "YES")
clsx real case
let result = window.clsx(str, true && 'test classname', false && 'WORKS', null && "failed", undefined && "null", Math.random() > 0.2 && "YES")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames string
clsx string
classnames real case
clsx real case

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; rv:106.0) Gecko/20100101 Firefox/106.0

Browser/OS: Firefox 106 on Windows

View result in a separate tab

Test name	Executions per second
classnames string	2349580.8 Ops/sec
clsx string	4772232.5 Ops/sec
classnames real case	3956335.0 Ops/sec
clsx real case	4989658.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Overview**

The benchmark compares three JavaScript libraries:

1. Classnames (also known as classNames)
2. CLSX (Classnames V2)
3. Fast-Classnames

These libraries are used to dynamically generate class names for HTML elements. The benchmark tests how these libraries perform when creating class names with different syntax and scenarios.

**Options being compared**

Here are the options being compared:

* Classnames:
	+ String-based method
	+ Real-world case (with conditionals, null/undefined values, etc.)
* CLSX:
	+ String-based method
	+ Real-world case (with conditionals, null/undefined values, etc.)
* Fast-Classnames:
	+ Real-world case (with conditionals, null/undefined values, etc.)

**Pros and cons of each approach**

1. Classnames:
	+ Pros: Lightweight, easy to use, well-maintained
	+ Cons: Limited functionality, may not perform as well with complex scenarios
2. CLSX:
	+ Pros: Improved performance, added features (e.g., support for null/undefined values)
	+ Cons: Slightly heavier weight, some users might find the syntax unfamiliar
3. Fast-Classnames:
	+ Pros: Optimized for real-world use cases, adds support for conditionals and null/undefined values
	+ Cons: New library, some users might be hesitant to adopt a new library

**Library explanations**

* Classnames: A lightweight JavaScript library used to dynamically generate class names for HTML elements. It provides a simple and easy-to-use API.
* CLSX (Classnames V2): An updated version of the original Classnames library. It improves performance and adds support for some advanced features, such as handling null/undefined values.
* Fast-Classnames: A custom implementation that aims to optimize the performance of class name generation. It's designed specifically for real-world use cases and provides additional features like conditional logic.

**Special JS feature or syntax**

There is no specific JavaScript feature or syntax being tested in this benchmark, aside from the differences between Classnames, CLSX, and Fast-Classnames. The focus is on comparing the performance of these libraries under various scenarios.

**Other alternatives**

If you're looking for alternative class name generation solutions, some other options include:

* jQuery's `.addClassClass()` method
* Lodash's `classify` function
* Vanilla JavaScript's built-in string methods (e.g., `split()`, `join()`)

Related benchmarks:

Classnames vs CLSX V2 (version: 0)

Compare CLSX vs Classnames vs templateLiterals

Comparing performance of: classnames string vs clsx string vs classnames real case vs clsx real case

Created: 2 years ago by: Guest

Jump to the latest result

classnames string

clsx string

classnames real case

clsx real case

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