Benchmark: Classnames vs CLSX vs some simpliest implementations

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.1/dist/clsx.min.js'></script>

Script Preparation code:

var foobar = [true, false, undefined, "lorem-ipsum"];

Tests:

classnames
let result = window.classNames("dolor-sit-amet", ...foobar, undefined)
clsx
let result = window.clsx("dolor-sit-amet", ...foobar, undefined)
array, filter(Boolean), join
function cx(...input) { return input.filter(Boolean).join(" "); } let result = cx("dolor-sit-amet", ...foobar, undefined)
array, filter(i => i), join
function cx(...input) { return input.filter(i => i).join(" "); } let result = cx("dolor-sit-amet", ...foobar, undefined)
forEach, join
function cx(...input) { let res = []; input.forEach(i => { if (typeof i === "string" && i !== "") { res.push(i); } }); return res.join(" "); } let result = cx("dolor-sit-amet", ...foobar, undefined)
forEach, +=
function cx(...input) { let res = ""; input.forEach(i => { if (typeof i === "string" && i !== "") { if (res !== "") { res += (" " + i); } else { res += i; } } }) return res; } let result = cx("dolor-sit-amet", ...foobar, undefined)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
array, filter(Boolean), join
array, filter(i => i), join
forEach, join
forEach, +=

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 104 on Windows

View result in a separate tab

Test name	Executions per second
classnames	1673788.8 Ops/sec
clsx	1951862.2 Ops/sec
array, filter(Boolean), join	1485288.5 Ops/sec
array, filter(i => i), join	2194563.2 Ops/sec
forEach, join	2430652.8 Ops/sec
forEach, +=	2842670.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The goal of MeasureThat.net is to compare the performance and usage of different JavaScript libraries and syntax for handling classes and strings.

Let's break down each test case:

1. **Classnames vs CLSX vs some simplest implementation**:
	* **Classnames**: A library for creating class names.
	* **CLSX**: A short-hand way of creating class names, similar to `classnames`.
	* The simplest implementation uses a template string with multiple arguments: `...foobar`.

Pros and Cons:

* **Classnames**: Pros - well-maintained, widely used, easy to use. Cons - might be overkill for simple cases.
* **CLSX**: Pros - concise, readable, similar to Classnames. Cons - not as widely used or maintained as Classnames.
* Simplest implementation: Pros - lightweight, easy to understand. Cons - might not be as efficient or robust as the libraries.

2. **array, filter(Boolean), join**:
	* This test case uses the `filter()` method with a callback function that returns `true` for non- falsy values and `false` otherwise.
	* It then joins the resulting array into a string using the `join()` method.

Pros and Cons:

* Pros: Efficient, easy to understand. Cons - might not be as concise or readable as other approaches.

3. **array, filter(i => i), join**:
	* Similar to the previous test case, but uses an arrow function instead of a callback function.
	* This can make the code more concise and expressive.

Pros and Cons:

* Pros: More concise, easier to read. Cons - might not be as efficient or performant in older browsers.

4. **forEach, join**:
	* This test case uses the `forEach()` method to iterate over the array of strings.
	* It then joins the resulting array into a string using the `join()` method.

Pros and Cons:

* Pros: Easy to understand, concise. Cons - might not be as efficient or performant in older browsers.

5. **forEach, +=**:
	* This test case uses the `forEach()` method to iterate over the array of strings.
	* It then appends each string to a result string using the `+=` operator.

Pros and Cons:

* Pros: Easy to understand, concise. Cons - might not be as efficient or performant in older browsers.

The benchmark results show that **array, filter(i => i), join** is the fastest approach, followed by **Classnames**, **CLSX**, and then the simplest implementation.

Other alternatives to consider:

* Using a library like Lodash, which provides a `map()` method for transforming arrays.
* Using a library like jQuery, which provides a `$().text()` method for setting text content.
* Using a library like Underscore.js, which provides a `join()` method for joining strings.

In general, the choice of approach depends on the specific use case and performance requirements. If you need to handle class names or arrays of strings frequently, using a dedicated library might be the best option. However, if you're working with simple cases, a lightweight implementation like the simplest one above might suffice.

Related benchmarks:

Classnames vs CLSX vs some simpliest implementations (version: 0)

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

Comparing performance of: classnames vs clsx vs array, filter(Boolean), join vs array, filter(i => i), join vs forEach, join vs forEach, +=

Created: 2 years ago by: Guest

Jump to the latest result

classnames

clsx

array, filter(Boolean), join

array, filter(i => i), join

forEach, join

forEach, +=

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