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`

Historical Performance Data aggregated from 52 community runs

Desktop Results:

Chrome 31 runs

String literally

173.8M/s

String based (return struct)

4.2M/s

clsx

4.2M/s

String based (if-else struct)

4.2M/s

Entries, filter, map, join

3.6M/s

Array based

3.2M/s

classnames

3.0M/s

Fastest: String literally (57.6x faster)

View exact numbers

✓ String literally: 173,777,504 ops/sec
• String based (return struct): 4,217,782 ops/sec
• clsx: 4,207,108 ops/sec
• String based (if-else struct): 4,193,002 ops/sec
• Entries, filter, map, join: 3,641,877 ops/sec
• Array based: 3,169,924 ops/sec
• classnames: 3,017,030 ops/sec

Firefox 9 runs

String literally

1439.5M/s

String based (return struct)

5.7M/s

String based (if-else struct)

5.6M/s

Entries, filter, map, join

4.5M/s

clsx

3.7M/s

Array based

2.7M/s

classnames

2.5M/s

Fastest: String literally (576.0x faster)

View exact numbers

✓ String literally: 1,439,539,328 ops/sec
• String based (return struct): 5,686,046 ops/sec
• String based (if-else struct): 5,626,920 ops/sec
• Entries, filter, map, join: 4,482,966 ops/sec
• clsx: 3,716,539 ops/sec
• Array based: 2,747,777 ops/sec
• classnames: 2,499,201 ops/sec

Safari 6 runs

String literally

386.7M/s

clsx

8.0M/s

classnames

6.0M/s

String based (return struct)

5.2M/s

String based (if-else struct)

5.0M/s

Entries, filter, map, join

4.6M/s

Array based

3.5M/s

Fastest: String literally (110.9x faster)

View exact numbers

✓ String literally: 386,672,672 ops/sec
• clsx: 7,966,980 ops/sec
• classnames: 6,002,528 ops/sec
• String based (return struct): 5,223,249 ops/sec
• String based (if-else struct): 5,001,527 ops/sec
• Entries, filter, map, join: 4,585,162 ops/sec
• Array based: 3,486,184 ops/sec

Mobile Results:

Chrome 6 runs

String literally

471.4M/s

clsx

3.3M/s

classnames

2.9M/s

String based (return struct)

2.8M/s

String based (if-else struct)

2.7M/s

Entries, filter, map, join

2.6M/s

Array based

2.1M/s

Fastest: String literally (224.6x faster)

View exact numbers

✓ String literally: 471,409,856 ops/sec
• clsx: 3,320,676 ops/sec
• classnames: 2,888,866 ops/sec
• String based (return struct): 2,788,992 ops/sec
• String based (if-else struct): 2,704,028 ops/sec
• Entries, filter, map, join: 2,551,548 ops/sec
• Array based: 2,099,014 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 9 months ago)

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

Browser/OS: Chrome 142 on Mac OS X 10.15.7

View result in a separate tab

String literally

224.3M/s

clsx

14.7M/s

String based (if-else struct)

13.8M/s

String based (return struct)

13.8M/s

Entries, filter, map, join

9.9M/s

Array based

7.5M/s

classnames

6.5M/s

View exact numbers

Test name	Executions per second
✓ String literally	224,329,952 Ops/sec
clsx	14,733,011 Ops/sec
String based (if-else struct)	13,823,149 Ops/sec
String based (return struct)	13,767,583 Ops/sec
Entries, filter, map, join	9,913,314 Ops/sec
Array based	7,539,895 Ops/sec
classnames	6,523,418 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 5 years ago by: Guest

Go to the latest result

classnames

clsx

Array based

String based (return struct)

String based (if-else struct)

Entries, filter, map, join

String literally

Historical Performance Data aggregated from 52 community runs

Desktop Results:

Chrome 31 runs

Firefox 9 runs

Safari 6 runs

Mobile Results:

Chrome 6 runs

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 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: 5 years ago by: Guest

Go to the latest result

classnames

clsx

Array based

String based (return struct)

String based (if-else struct)

Entries, filter, map, join

String literally

Historical Performance Data aggregated from 52 community runs

Desktop Results:

Chrome 31 runs

Firefox 9 runs

Safari 6 runs

Mobile Results:

Chrome 6 runs

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 Array based vs String based (return struct) vs String based (if-else struct) vs Entries, filter, map, join vs String literally`