Benchmark: Classnames vs CLSX vs Others

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 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`

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
classnames	1542304.5 Ops/sec
clsx	2439563.2 Ops/sec
Array based	1659866.5 Ops/sec
String based (return struct)	2190677.0 Ops/sec
String based (if-else struct)	2247632.5 Ops/sec
Entries, filter, map, join	1928368.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, hosted on MeasureThat.net, compares the performance of three approaches to create a template string:

1. `classnames`
2. `clsx`
3. Two custom implementations: "Array based" and "String based (if-else struct)".

**Library: Classnames**

`Classnames` is a popular JavaScript library for working with CSS classes. It provides a convenient way to concatenate multiple class names into a single string. The `classNames` function takes an array of strings as input and returns the concatenated result.

In the benchmark, the `classnames` implementation is used to create a template string from the input variables `str`, `obj`, `arr`, and `classname`.

**Library: CLSX**

`CLSX` (Class Names Shortcuts) is another JavaScript library that provides a similar API to `classnames`. It allows you to concatenate CSS class names into a single string.

The `clsx` function in the benchmark takes an array of strings as input and returns the concatenated result, similar to `classNames`.

**Custom Implementations**

There are two custom implementations:

1. **Array based**: This implementation uses a loop to iterate over the input variables and concatenate their values into a single string.
2. **String based (if-else struct)**: This implementation uses an if-else structure to check the type of each variable and concatenate its value accordingly.

**Performance Comparison**

The benchmark measures the execution speed of each approach, reported in executions per second (`ExecutionsPerSecond`). The results show that:

* `clsx` performs best, with an average of 2.43 million executions per second across all tests.
* "String based (if-else struct)" comes second, with an average of 1.65 million executions per second.
* "Array based" has the lowest performance, with an average of 1.54 million executions per second.
* `classnames` and its counterpart, "Entries, filter, map, join", have slower performances, with averages around 154k and 165k executions per second, respectively.

**Conclusion**

The results suggest that `clsx` is the most efficient approach for creating a template string from multiple variables. The custom implementations, while valid, perform significantly worse than the libraries. This benchmark highlights the importance of using optimized libraries when working with string concatenation in JavaScript.

Related benchmarks:

Classnames vs CLSX vs Others (version: 0)

Compare CLSX vs Classnames 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

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

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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