Benchmark: Classnames vs CLSX 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 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`

Historical Performance Data aggregated from 219 community runs

Desktop Results:

Chrome 159 runs

clsx

4.3M/s

String based (return struct)

4.2M/s

String based (if-else struct)

4.1M/s

Entries, filter, map, join

3.7M/s

Array based

3.2M/s

classnames

3.0M/s

Fastest: clsx (1.4x faster)

View exact numbers

✓ clsx: 4,286,187 ops/sec
• String based (return struct): 4,221,818 ops/sec
• String based (if-else struct): 4,131,678 ops/sec
• Entries, filter, map, join: 3,671,159 ops/sec
• Array based: 3,151,103 ops/sec
• classnames: 3,000,096 ops/sec

Firefox 26 runs

String based (return struct)

4.3M/s

String based (if-else struct)

4.1M/s

Entries, filter, map, join

3.5M/s

clsx

3.3M/s

Array based

2.3M/s

classnames

1.9M/s

Fastest: String based (return struct) (2.3x faster)

View exact numbers

✓ String based (return struct): 4,280,106 ops/sec
• String based (if-else struct): 4,073,326 ops/sec
• Entries, filter, map, join: 3,521,328 ops/sec
• clsx: 3,262,263 ops/sec
• Array based: 2,250,690 ops/sec
• classnames: 1,865,758 ops/sec

Other 13 runs

String based (return struct)

3.5M/s

clsx

3.4M/s

String based (if-else struct)

3.4M/s

Entries, filter, map, join

3.0M/s

Array based

2.7M/s

classnames

2.5M/s

Fastest: String based (return struct) (1.4x faster)

View exact numbers

✓ String based (return struct): 3,471,511 ops/sec
• clsx: 3,436,258 ops/sec
• String based (if-else struct): 3,412,698 ops/sec
• Entries, filter, map, join: 3,006,164 ops/sec
• Array based: 2,672,436 ops/sec
• classnames: 2,532,890 ops/sec

Mobile Results:

Chrome 14 runs

String based (if-else struct)

1.9M/s

String based (return struct)

1.9M/s

clsx

1.8M/s

Entries, filter, map, join

1.3M/s

Array based

1.1M/s

classnames

996K/s

Fastest: String based (if-else struct) (1.9x faster)

View exact numbers

✓ String based (if-else struct): 1,878,985 ops/sec
• String based (return struct): 1,856,678 ops/sec
• clsx: 1,827,926 ops/sec
• Entries, filter, map, join: 1,324,924 ops/sec
• Array based: 1,108,808 ops/sec
• classnames: 995,821 ops/sec

Safari 7 runs

clsx

3.9M/s

classnames

3.5M/s

String based (return struct)

3.3M/s

String based (if-else struct)

3.3M/s

Entries, filter, map, join

2.9M/s

Array based

2.5M/s

Fastest: clsx (1.6x faster)

View exact numbers

✓ clsx: 3,926,152 ops/sec
• classnames: 3,451,928 ops/sec
• String based (return struct): 3,284,123 ops/sec
• String based (if-else struct): 3,281,034 ops/sec
• Entries, filter, map, join: 2,871,479 ops/sec
• Array based: 2,469,090 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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 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

clsx

11.9M/s

String based (return struct)

10.8M/s

String based (if-else struct)

10.7M/s

Entries, filter, map, join

7.4M/s

Array based

5.7M/s

classnames

5.2M/s

View exact numbers

Test name	Executions per second
✓ clsx	11,903,754 Ops/sec
String based (return struct)	10,769,444 Ops/sec
String based (if-else struct)	10,744,460 Ops/sec
Entries, filter, map, join	7,381,368 Ops/sec
Array based	5,708,622 Ops/sec
classnames	5,156,558 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares four approaches to create a template string from an object with various types of values:

1. `classnames`
2. `clsx`
3. An own implementation using Array-based approach
4. Another own implementation using String-based (return struct) approach
5. Another own implementation using String-based (if-else struct) approach
6. Using entries, filter, map, and join

**What's being tested**

The benchmark is testing the performance of each approach to create a template string. The input data includes an object with strings, booleans, and arrays.

**Options Compared**

Here's a summary of the options compared:

* `classnames` vs `clsx`: Both are popular libraries for creating class names dynamically.
	+ Pros: Well-maintained, widely used, easy to use.
	+ Cons: May have overhead due to external dependencies.
* Array-based approach vs String-based (return struct) approach:
	+ Array-based approach: Uses a loop to iterate over the input values and build the template string.
	+ String-based (return struct) approach: Uses a more concise syntax to build the template string using the `join` method.
	+ Pros: Generally faster, more concise.
	+ Cons: May be less readable for some developers.
* Array-based approach vs String-based (if-else struct) approach:
	+ Similar to the previous comparison, but with an additional conditional statement in the String-based approach.
	+ Pros: Provides more control over the build process.
	+ Cons: May be slower and less concise.
* Entries, filter, map, and join: Uses a functional programming style to create the template string.
	+ Pros: Concise, expressive, potentially faster due to optimized algorithms.
	+ Cons: May require additional setup or understanding of functional programming concepts.

**Benchmarks**

The latest benchmark results show that:

1. String-based (return struct) approach is the fastest.
2. Entries, filter, map, and join approach is also fast but slightly slower than the previous two approaches.
3. `clsx` library is slower than both own implementations using Array-based and String-based (if-else struct) approaches.
4. Array-based approach is slower than all other approaches.

Keep in mind that these results may vary depending on the specific use case, input data, and platform being used.

**Conclusion**

In conclusion, the benchmark highlights the importance of choosing an efficient approach to create template strings. The String-based (return struct) approach seems to be the fastest, followed closely by the Entries, filter, map, and join approach. Both own implementations using Array-based and `clsx` library are slower but still viable options depending on specific requirements.

Classnames vs CLSX vs Alternatives (version: 2)

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: 6 years ago by: Registered User

Go to the latest result

classnames

clsx

Array based

String based (return struct)

String based (if-else struct)

Entries, filter, map, join

Historical Performance Data aggregated from 219 community runs

Desktop Results:

Chrome 159 runs

Firefox 26 runs

Other 13 runs

Mobile Results:

Chrome 14 runs

Safari 7 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 (version: 2)

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: 6 years ago by: Registered User

Go to the latest result

classnames

clsx

Array based

String based (return struct)

String based (if-else struct)

Entries, filter, map, join

Historical Performance Data aggregated from 219 community runs

Desktop Results:

Chrome 159 runs

Firefox 26 runs

Other 13 runs

Mobile Results:

Chrome 14 runs

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