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>

​x
 
​
<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']

 
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')
let result = window.classNames(str, obj, arr, 'test classname')

clsx

let result = window.clsx(str, obj, arr, 'test classname')

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

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

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

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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classnames	5753146.0 Ops/sec
clsx	12319609.0 Ops/sec
Array based	6206209.5 Ops/sec
String based (return struct)	11080346.0 Ops/sec
String based (if-else struct)	11066641.0 Ops/sec
Entries, filter, map, join	8429716.0 Ops/sec

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

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:

classnames
clsx
An own implementation using Array-based approach
Another own implementation using String-based (return struct) approach
Another own implementation using String-based (if-else struct) approach
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:

String-based (return struct) approach is the fastest.
Entries, filter, map, and join approach is also fast but slightly slower than the previous two approaches.
clsx library is slower than both own implementations using Array-based and String-based (if-else struct) approaches.
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.

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.

Related benchmarks:

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

Jump to the latest result

classnames