Benchmark: clsx or classList

HTML Preparation code:

<!--your preparation HTML code goes here-->
<div id="dom" class="foo bar baz hello hello-world hi"></div>

Script Preparation code:

// clsx
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.clsx=n()}(this,(function(){function e(n){var t,f,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var r=n.length;for(t=0;t<r;t++)n[t]&&(f=e(n[t]))&&(o&&(o+=" "),o+=f)}else for(f in n)n[f]&&(o&&(o+=" "),o+=f);return o}function n(){for(var n,t,f=0,o="",r=arguments.length;f<r;f++)(n=arguments[f])&&(t=e(n))&&(o&&(o+=" "),o+=t);return o}return n.clsx=n,n}));


const dom = document.getElementById("dom");


function use_clsx(dom, ...next) {
  	const className = clsx(...next);
 	if (dom.__className !== className) {
      dom.className = dom.__className = className;
    }
}

function use_classlist(dom, prev = {}, next) {
  for (const k in next) {
   if (prev[k] !== next[k]) {
     if (next[k]) {
       dom.classList.add(k);
     } else {
       dom.classList.remove(k);
     }
   }
  }
  return next;
}


function use_toggle(dom, prev = {}, next) {
  for (const k in next) {
   if (prev[k] !== next[k]) {
     dom.classList.toggle(k, next[k]);
   }
  }
  return next;
}

Tests:

use_clsx
use_clsx(dom, "foo bar baz", { hello: true, 'hello-world': true, hi: true }); use_clsx(dom, "foo bar baz", { hello: false, 'hello-world': true, hi: false }); use_clsx(dom, "foo bar baz", { hello: true, 'hello-world': true, hi: true });
use_classlist
var prev; prev = use_classlist(dom, prev, { hello: true, 'hello-world': true, hi: true }); prev = use_classlist(dom, prev, { hello: false, 'hello-world': true, hi: false }); prev = use_classlist(dom, prev, { hello: true, 'hello-world': true, hi: true });
use_toggle
var prev; prev = use_toggle(dom, prev, { hello: true, 'hello-world': true, hi: true }); prev = use_toggle(dom, prev, { hello: false, 'hello-world': true, hi: false }); prev = use_toggle(dom, prev, { hello: true, 'hello-world': true, hi: true });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
use_clsx
use_classlist
use_toggle

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
use_clsx	1833940.8 Ops/sec
use_classlist	431474.6 Ops/sec
use_toggle	612282.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares three different approaches for managing CSS classes on a DOM element:

1. **using clsx**: This is a utility function to concatenate class names based on certain conditions.
2. **using classList**: This utilizes the native `classList` API to add or remove classes dynamically.
3. **using toggle**: This is a variation that utilizes `classList.toggle` to add or remove classes based on boolean values.

### Options Compared

1. **clsx**:
   - **Description**: The `clsx` function generates a single class name string based on the input, which can be a combination of strings and an object that indicates the conditional inclusion of class names.
   - **Pros**:
     - Concise syntax for handling dynamic class names.
     - Does not require multiple DOM manipulations; sets the class name in one go.
   - **Cons**:
     - Less explicit when managing class addition/removal, since it creates a whole string at once rather than manipulating the class list directly.

2. **classList**:
   - **Description**: This method uses the native `classList` API available on DOM elements, allowing granular control to add or remove individual classes based on a comparison of previous states.
   - **Pros**:
     - Clearly separates addition and removal of classes, making it easier to follow changes.
     - Efficient in modifying only what's necessary without creating an entire class string.
   - **Cons**:
     - Slightly more verbose as it requires looping through keys and checking conditions for each class.

3. **toggle**:
   - **Description**: This method also uses the `classList` API but specifically utilizes the `toggle` method, which either adds or removes a class based on its current presence or the boolean value provided.
   - **Pros**:
     - Efficiently handles both addition and removal in one function call per class.
     - Reduces the need for explicit checks for presence or absence of the class.
   - **Cons**:
     - Less transparent if all its use cases aren't clear, especially when many toggles are applied at once.

### General Insights and Considerations

- **Performance**: The benchmark results show that `clsx` is the fastest option with approximately 837,420 executions per second, while `toggle` and `classList` perform significantly slower, at 408,346.59 and 330,898.41 executions per second, respectively. This indicates that, if performance is the key factor for applications with high frequency of class updates, `clsx` is the best choice.

- **Use Cases**: Selecting a method can depend on the specific needs of a project. If class management is complex and composed of many conditions, the clarity and explicitness of `classList` or `toggle` may outweigh the performance benefits of `clsx`. Conversely, for simpler use cases or when performance is pivotal, `clsx` is advantageous.

### Alternatives

- Libraries like **classnames** serve a similar purpose to `clsx` and are often used in React applications; they provide a straightforward syntax for handling class strings.
- Inline-style solutions or frameworks (like Emotion or Styled Components in React) can also be considered as alternatives to direct class manipulation, allowing for dynamic styling based on state or props, albeit with potentially more overhead.

### Conclusion

The benchmark comparison sheds light on the trade-offs between readability and performance. Users should consider their specific use cases and performance requirements when choosing between these approaches for managing CSS classes.

Related benchmarks:

clsx or classList (version: 1)

Comparing performance of: use_clsx vs use_classlist vs use_toggle

Created: one month ago by: Guest

Jump to the latest result

use_clsx

use_classlist

use_toggle

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):