Benchmark: CLSX vs concat - MeasureThat.net

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

Script Preparation code:

var str1 = 'av-absolute av-text-base av-text-av-gray-150 av-top-1/2 av-z-10 '
var str2 = 'dark:av-text-av-gray-150 '
var str3 = 'av-duration-300 av-transform av--translate-y-6 av-scale-75 av-origin-[0] av-left-4 '
var str4 = 'peer-focus:av-text-av-gray-150 peer-focus:dark:av-text-av-gray-150'

Tests:

clsx
let result = window.clsx(str1, str2, str3, str4)
concat
let result = str1 + str2 + str3 + str4

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clsx
concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 12; RMX3370 Build/RKQ1.211103.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/107.0.5304.105 Mobile Safari/537.36

Browser/OS: Chrome Mobile 107 on Android

View result in a separate tab

Test name	Executions per second
clsx	1268045.6 Ops/sec
concat	2321480.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case, where two different approaches are compared: using the `clsx` library and concatenating strings directly.

**Script Preparation Code**

The script preparation code defines four string variables:

* `str1`: A CSS-style string with various classes and values.
* `str2`: A CSS-style string with a specific class and value.
* `str3`: Another CSS-style string with various classes and values.
* `str4`: A CSS-style string with a specific class.

These strings are used as input to the benchmark test cases.

**Html Preparation Code**

The HTML preparation code includes two JavaScript libraries:

* `classnames` (version 2.3.2): A utility library for working with CSS classes.
* `clsx` (version 1.2.1): The `clsx` library itself, which is used as the alternative to concatenating strings.

**Benchmark Test Cases**

There are two test cases:

### clsx

The first test case uses the `clsx` library to conditionally include CSS classes in a string. It takes four input strings (`str1`, `str2`, `str3`, and `str4`) and uses the `window.clsx()` function to apply the CSS classes.

### concat

The second test case concatenates the four input strings directly using the `+` operator.

**Options Compared**

In this benchmark, two options are compared:

* **clsx**: Using the `clsx` library to conditionally include CSS classes in a string.
* **concat**: Concatenating strings directly without using a library.

**Pros and Cons**

**clsx:**

Pros:

* More readable and maintainable code, as the CSS classes are explicitly applied using the library's syntax.
* Can handle more complex class relationships and conditional inclusion.

Cons:

* Adds an extra dependency (the `classnames` library) to the project.
* May introduce performance overhead due to function call and library initialization.

**concat:**

Pros:

* No additional dependencies or overhead.
* Simple and lightweight implementation.

Cons:

* Less readable and maintainable code, as the CSS classes are concatenated directly.
* May lead to longer execution times or increased memory usage due to string concatenation.

**Other Considerations**

* Performance: The `clsx` library may have a performance advantage over concatenating strings, especially for large datasets or complex class relationships.
* Maintainability: Using a library like `clsx` can improve code readability and maintainability, making it easier to manage complex CSS classes and conditional inclusion.
* Browser Support: Both approaches should work across most modern browsers. However, the `clsx` library may provide better support for older browsers due to its use of vendor prefixes.

**Alternatives**

Other alternatives to using `clsx` or concatenating strings include:

* Using a different utility library, such as `dom-helpers` or `css-in-js`.
* Implementing custom string concatenation logic.
* Using a preprocessor like Sass or Less to manage CSS classes and conditional inclusion.

Related benchmarks:

CLSX vs concat (version: 0)

CLSX perf

Comparing performance of: clsx vs concat

Created: 2 years ago by: Guest

Jump to the latest result

clsx

concat

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