Benchmark: Classnames vs CLSX vs custom

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')
Custom implementation using reduce
function maybeJoim(a,b) { return b ? a + " " + b : a; } function customCn(...args) { return args.reduce((acc, curr) => { if (!curr) return acc; if (typeof curr === "string") { return maybeJoin(acc,curr); } if (Array.isArray(curr)) { return maybeJoin(acc, curr.filter(Boolean).join(" ")); } if (typeof curr === "object") { return maybeJoin(acc, Object.keys(curr).filter((key) => key && curr[key]).join(" ")); } return acc; }, ''); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
Custom implementation using reduce

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; SAMSUNG SM-J810G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/16.0 Chrome/92.0.4515.166 Mobile Safari/537.36

Browser/OS: Chrome Mobile 92 on Android

View result in a separate tab

Custom implementation using reduce

93.4M/s

clsx

150K/s

classnames

103K/s

View exact numbers

Test name	Executions per second
✓ Custom implementation using reduce	93,391,176 Ops/sec
clsx	149,813 Ops/sec
classnames	103,388 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a benchmarking test comparing three different approaches for implementing class names in JavaScript:

1. **Classnames**: A popular library for handling class names and other styles in CSS.
2. **CLSX (Class Names eXtension)**: A lightweight, utility-first library for working with class names.
3. **Custom implementation using reduce**: A custom implementation that uses the `reduce` method to concatenate class names.

**Options Comparison**

The three options are compared based on their performance and functionality:

* **Classnames**:
	+ Pros:
		- Well-maintained and widely adopted library.
		- Provides a simple and efficient way to handle class names.
	+ Cons:
		- May have a higher overhead due to its complexity.
		- Requires additional dependencies (the library itself).
* **CLSX**:
	+ Pros:
		- Lightweight and compact, making it suitable for resource-constrained environments.
		- Provides a simple and efficient way to work with class names.
	+ Cons:
		- Less widely adopted than Classnames, which may affect community support.
		- May not be as feature-rich as Classnames.
* **Custom implementation using reduce**:
	+ Pros:
		- Highly customizable and flexible.
		- Can be optimized for specific use cases.
	+ Cons:
		- Requires manual implementation and maintenance.
		- May have performance overhead due to the `reduce` method.

**Library Description**

1. **Classnames**: A JavaScript library that provides a simple and efficient way to handle class names in CSS. It is designed to work with both modern and older browsers.
2. **CLSX (Class Names eXtension)**: A lightweight, utility-first library for working with class names. It provides a compact and efficient way to concatenate class names.

**Special JS Feature or Syntax**

The benchmark uses the `window.classNames` function from the Classnames library, which is a special feature introduced in recent versions of browsers (specifically, Chrome 92 and later). This function allows for easier integration with modern web development frameworks and libraries.

**Benchmark Preparation Code Explanation**

The script preparation code creates an object `obj` with some sample class names (`style-2`, `style-3`, and `style-4`) and an array `arr` with some style names (`style-5` and `style-6`). This code is used to prepare the data for the benchmark.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. **Lodash**: A popular utility library that provides a comprehensive set of functions for working with class names.
2. **Simplesort**: A lightweight sorting algorithm that can be used to concatenate class names.
3. **Manual concatenation**: You could implement your own custom solution using manual string concatenation, but this would likely result in poor performance compared to the benchmarked options.

Keep in mind that each of these alternatives has its pros and cons, which are not exhaustively covered here. It's essential to evaluate their trade-offs based on your specific use case and requirements.

Classnames vs CLSX vs custom (version: 0)

Compare CLSX vs Classnames vs custom implementation

Comparing performance of: `classnames vs clsx vs Custom implementation using reduce`

Created: 2 years ago by: Guest

Go to the latest result

classnames

clsx

Custom implementation using reduce

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 vs custom (version: 0)

Compare CLSX vs Classnames vs custom implementation

Comparing performance of: classnames vs clsx vs Custom implementation using reduce

Created: 2 years ago by: Guest

Go to the latest result

classnames

clsx

Custom implementation using reduce

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 vs Custom implementation using reduce`