MeasureThat.net

Run results for: Classnames vs CLSX vs Alternatives

Compare CLSX vs Classnames vs an own implementation of creating a template string

Go to the benchmark
Run details:
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
Chrome 134
Mac OS X 10.15.7
Desktop
4 days ago
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
HTML Preparation code:
​x
 
1
​
2
<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js'></script>
3
<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`