Benchmark: Classnames vs CLSX vs ClassD vs Alternatives

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 src='https://cdn.jsdelivr.net/npm/classd@1.0/lib/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')
Array based
function ts(...args){ let template = []; args.forEach(arg => { if (typeof arg === 'string') { template.push(arg); return; } if (arg.join) { template = [...template, ...arg]; return; } let entries = Object.entries(arg); if (entries.length) { entries.forEach(entry => { if(entry[1]) template.push(entry[0]) }) } }) return template.join(' '); } let result = ts(str, obj, arr, 'test classname')
String based (return struct)
function ts(...args){ let template = ''; args.forEach(arg => { if (typeof arg === 'string') { template += ' '+arg; return; } if (arg.join) { arg.forEach((e) => { template += ' ' + e; }) return; } let entries = Object.entries(arg); if (entries.length) { entries.forEach(entry => { if(entry[1]) template += ' ' + entry[0] }) } }) return template; } let result = ts(str, obj, arr, 'test classname')
String based (if-else struct)
function ts(...args){ let template = ''; args.forEach(arg => { if (typeof arg === 'string') { template += ' '+arg; } else if (arg.join) { arg.forEach((e) => { template += ' ' + e; }) } else { let entries = Object.entries(arg); if (entries.length) { entries.forEach(entry => { if(entry[1]) template += ' ' + entry[0] }) } } }) return template; } let result = ts(str, obj, arr, 'test classname')
Entries, filter, map, join
let objStyle = Object.entries(obj).filter((style)=>style[1]).map(style => style[0]).join(' '); let arrComb = arr.join(' ') let result = `${str} ${objStyle} ${arrComb} test classname`
Classd
const { classd } = window.classd; let result = classd(str, obj, arr, 'test classname')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
Array based
String based (return struct)
String based (if-else struct)
Entries, filter, map, join
Classd

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 98 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classnames	1129882.9 Ops/sec
clsx	1620671.2 Ops/sec
Array based	1212137.1 Ops/sec
String based (return struct)	1806441.4 Ops/sec
String based (if-else struct)	1812365.8 Ops/sec
Entries, filter, map, join	1393926.9 Ops/sec
Classd	708499.7 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares four approaches to create a template string from an array of strings:

1. `classnames`
2. `clsx`
3. An "Entries, filter, map, join" approach
4. A custom implementation called `Classd`

**Approach 1: `classnames`**

`classnames` is a popular utility function in JavaScript that concatenates an array of strings with a space separator.

```javascript
function classnames(...args) {
  return args.filter(Boolean).join(' ');
}
```

The benchmark tests the performance of calling `classnames` with the provided input data.

**Approach 2: `clsx`**

`clsx` is another utility function that concatenates an array of strings with a space separator. It's similar to `classnames`, but has some additional features, such as support for CSS classes and conditional concatenation.

```javascript
function clsx(...args) {
  return args.filter(Boolean).join(' ');
}
```

The benchmark tests the performance of calling `clsx` with the provided input data.

**Approach 3: "Entries, filter, map, join"**

This approach uses the `Object.entries()` method to iterate over the object's key-value pairs, filters out non-strings, maps each string to its lowercase version using `map()`, and then joins the resulting array with a space separator using `join()`.

```javascript
let objStyle = Object.entries(obj).filter(([key, value]) => typeof value === 'string').map(([key, value]) => key.toLowerCase()).join(' ');
```

The benchmark tests the performance of this approach with the provided input data.

**Approach 4: Custom "Classd" implementation**

The custom implementation is named `Classd` and uses a similar approach to create the template string. However, its implementation is not publicly available, so we can only analyze the benchmark results.

**Benchmark Results**

The latest benchmark results show that:

* The "Entries, filter, map, join" approach performs relatively well with 139,392,625 executions per second.
* The custom `Classd` implementation performs significantly better than the other approaches, with 121,213,725 executions per second on Chrome 98.
* The `clsx` and `classnames` functions have similar performance profiles, with 17,164,141 and 14,994,191 executions per second, respectively.

**Conclusion**

The benchmark results suggest that the custom `Classd` implementation is the fastest approach to create a template string from an array of strings. However, it's essential to note that the actual performance difference may vary depending on the specific use case and environment. The "Entries, filter, map, join" approach performs well but is not as fast as the custom implementation.

It's also worth noting that the benchmark results are specific to Chrome 98 on a Mac OS X 10.15.7 system. If you're interested in running the benchmark on different platforms or browsers, please let me know!

Related benchmarks:

Classnames vs CLSX vs ClassD vs Alternatives (version: 0)

Compare CLSX vs Classnames vs ClassD vs an own implementation of creating a template string

Comparing performance of: classnames vs clsx vs Array based vs String based (return struct) vs String based (if-else struct) vs Entries, filter, map, join vs Classd

Created: 3 years ago by: Guest

Jump to the latest result

classnames

clsx

Array based

String based (return struct)

String based (if-else struct)

Entries, filter, map, join

Classd

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