Benchmark: classnames , clsx, classcat

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.2/index.min.js'></script>
<script src='https://unpkg.com/clsx@latest/dist/clsx.min.js'></script>
<script type="module">
    import classcat from "https://unpkg.com/classcat?module"
    window.classcat = classcat
</script>

Script Preparation code:

var obj = {
    one: true,
    abcd: Math.random() <= 0.5,
    efghijkl: Math.random() <= 0.5,
    mnopqrstuvwxyz: Math.random() <= 0.5,
    efghijklmnopqrstuvwxyz: Math.random() <= 0.5,
    abcdefghijklmnopqrstuvwxyz: Math.random() <= 0.5,
    abcd: Math.random() <= 0.5,
    efghijkl: Math.random() <= 0.5,
    mnopqrstuvwxyz: Math.random() <= 0.5,
    efghijklmnopqrstuvwxyz: Math.random() <= 0.5,
    abcdefghijklmnopqrstuvwxyz: Math.random() <= 0.5,
    two: false,
    three: true
}

var arr = [
    true && "one",
    Math.random() <= 0.5 && "abcd",
    Math.random() <= 0.5 && "efghijkl",
    Math.random() <= 0.5 && "mnopqrstuvwxyz",
    Math.random() <= 0.5 && "efghijklmnopqrstuvwxyz",
    Math.random() <= 0.5 && "abcdefghijklmnopqrstuvwxyz",
    Math.random() <= 0.5 && "abcd",
    Math.random() <= 0.5 && "efghijkl",
    Math.random() <= 0.5 && "mnopqrstuvwxyz",
    Math.random() <= 0.5 && "efghijklmnopqrstuvwxyz",
    Math.random() <= 0.5 && "abcdefghijklmnopqrstuvwxyz",
    false && "two",
    true && "three",
]

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classname(obj)
classname(arr)
clsx(obj)
clsx(arr)
classcat(obj)
classcat(arr)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classname(obj)	4534986.0 Ops/sec
classname(arr)	1905293.4 Ops/sec
clsx(obj)	6771636.5 Ops/sec
clsx(arr)	3545420.2 Ops/sec
classcat(obj)	3869624.2 Ops/sec
classcat(arr)	3156653.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark compares the performance of three JavaScript libraries: `classnames`, `clsx`, and `classcat`. The benchmark tests how quickly each library can generate class names from two different inputs: an object (`obj`) and an array (`arr`).

**What are we testing?**

We're testing the execution time of each library when generating class names using different inputs. Specifically, we're comparing:

1. `classnames`: a popular utility library for generating class names.
2. `clsx`: a concise alternative to `classnames`.
3. `classcat`: another utility library for generating class names.

**Options compared**

The benchmark compares the execution time of each library when using different inputs: an object (`obj`) and an array (`arr`). This allows us to compare the performance of each library in various scenarios.

**Pros and Cons of each approach**

1. `classnames`:
	* Pros: widely used, well-maintained, and supports many features.
	* Cons: might be slower than other libraries due to its comprehensive feature set.
2. `clsx`:
	* Pros: concise syntax, fast execution time, and supports a wide range of browsers.
	* Cons: might not support all the features of `classnames`.
3. `classcat`:
	* Pros: lightweight, fast execution time, and easy to use.
	* Cons: limited documentation and might require more manual configuration.

**Library descriptions**

1. `classnames`: A popular utility library for generating class names based on input conditions. It supports a wide range of features, including conditional statements, prefix/suffix support, and CSS class manipulation.
2. `clsx`: A concise alternative to `classnames` that uses template literals to generate class names. It's designed for fast execution times and supports modern browsers.
3. `classcat`: A lightweight utility library for generating class names based on input conditions. It uses a different syntax than `classnames` and might require more manual configuration.

**Special JS features or syntax**

None mentioned in the provided benchmark definition.

**Other alternatives**

If you're looking for alternative libraries, consider:

1. `lodash`: A comprehensive utility library with many features related to class name generation.
2. `dom-class-lists`: A lightweight library specifically designed for generating class names based on input conditions.
3. `css-class-compiler`: A compiler that generates CSS classes from JavaScript code.

Keep in mind that the choice of library depends on your specific use case and performance requirements.

After this deep dive, I hope you have a better understanding of the benchmark's goals and the libraries being compared!

Related benchmarks:

classnames , clsx, classcat (version: 0)

Comparing performance of: classname(obj) vs classname(arr) vs clsx(obj) vs clsx(arr) vs classcat(obj) vs classcat(arr)

Created: 2 years ago by: Guest

Jump to the latest result

classname(obj)

classname(arr)

clsx(obj)

clsx(arr)

classcat(obj)

classcat(arr)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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