Benchmark: Classnames vs CLSX vs Alternatives vs Template Literals

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')
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`
String literally
var literal = `style ${true ? "style-2" : ""} ${false ? "style-3" : ""} ${true ? "style-4" : ""} style-5 style-6`

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
String literally

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 days ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classnames	6068133.5 Ops/sec
clsx	13322390.0 Ops/sec
Array based	6503492.5 Ops/sec
String based (return struct)	11780673.0 Ops/sec
String based (if-else struct)	11760408.0 Ops/sec
Entries, filter, map, join	8953075.0 Ops/sec
String literally	179998160.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in this benchmark:

**What is being tested:**

The benchmark is comparing four different approaches to generate a CSS class string from an object and an array.

1. `classnames` (a library): generates a class string by joining the object keys with spaces.
2. `clsx` (another library): generates a class string by using template literals and conditional expressions.
3. "String literally" (a simple approach): generates a class string by concatenating strings directly.
4. Three more approaches:
	* "Entries, filter, map, join": uses array methods to generate the class string.
	* "Array based": uses a loop to generate the class string.
	* "String based (return struct)" and "String based (if-else struct)": two different implementations of generating the class string using strings.

**What is being compared:**

The benchmark is comparing the performance of these four approaches on various browsers and devices. The results are measured in executions per second.

**Key insights:**

* `classnames` library seems to be the slowest approach, suggesting that it might have some overhead or optimization opportunities.
* `clsx` library appears to be the fastest approach, which is not surprising given its optimized implementation for performance.
* The "String literally" approach is quite fast, possibly because it avoids the overhead of libraries and uses simple string concatenation.
* The two "Array based" approaches are slower than the "Entries, filter, map, join" approach, suggesting that using array methods can be more efficient.

Overall, this benchmark seems to be testing the performance of different approaches to generating a CSS class string from an object and an array.

Related benchmarks:

Classnames vs CLSX vs Alternatives vs Template Literals (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 vs String literally

Created: 4 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

String literally

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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