Benchmark: classcat, clsx, obj-str, vanilla, merge-class-names

HTML Preparation code:

<script type="module">
    import classcat from "https://unpkg.com/classcat?module"
    window.classcat = classcat
</script>
<script type="module">
    import objstr from "https://unpkg.com/obj-str?module"
    window.objstr = objstr
</script>
<script type="module"> 
	import mergeClassNames from "https://unpkg.com/merge-class-names?module"
	window.mcn = mergeClassNames
</script>
<script src='https://unpkg.com/clsx@latest/dist/clsx.min.js'></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:

classcat(arr)
window.classcat(arr)
classcat(obj)
window.classcat(obj)
clsx(arr)
clsx(arr)
clsx(obj)
clsx(obj)
objstr(obj)
window.objstr(obj)
arr.filter(Boolean).join(" ")
arr.filter(Boolean).join(" ")
merge-class-names(arr)
window.mcn(arr)
merge-class-names(obj)
window.mcn(obj)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classcat(arr)
classcat(obj)
clsx(arr)
clsx(obj)
objstr(obj)
arr.filter(Boolean).join(" ")
merge-class-names(arr)
merge-class-names(obj)

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/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classcat(arr)	3846952.5 Ops/sec
classcat(obj)	6859977.5 Ops/sec
clsx(arr)	5479892.0 Ops/sec
clsx(obj)	7148922.0 Ops/sec
objstr(obj)	6889321.5 Ops/sec
arr.filter(Boolean).join(" ")	3604847.8 Ops/sec
merge-class-names(arr)	3844910.0 Ops/sec
merge-class-names(obj)	5024234.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the test cases and explain what's being tested, along with their pros and cons.

**Classcat**

* Test: `window.classcat(arr)`
* Description: Classcat is a library that helps you create classes for objects in JavaScript. The benchmark tests how fast it can concatenate class names.
* Pros:
	+ Easy to use and understand
	+ Provides a concise way to define classes for objects
* Cons:
	+ Can be slower than other alternatives due to the overhead of creating classes
* Other considerations: Classcat is useful when you need to create classes dynamically or when working with complex object structures.

**Clsx**

* Test: `clsx(arr)`
* Description: Clsx is a library that helps you compose functions for objects in JavaScript. The benchmark tests how fast it can execute the composed function.
* Pros:
	+ Fast and efficient
	+ Easy to use and understand
* Cons:
	+ Requires manual function composition, which can be error-prone
* Other considerations: Clsx is useful when you need to perform complex operations on objects or when working with large datasets.

**Objstr**

* Test: `objstr(obj)`
* Description: Objstr is a library that helps you create object strings in JavaScript. The benchmark tests how fast it can concatenate property names.
* Pros:
	+ Fast and efficient
	+ Easy to use and understand
* Cons:
	+ Limited functionality compared to other alternatives
* Other considerations: Objstr is useful when you need to create object strings for debugging or logging purposes.

**Arr.filter(Boolean).join(" ")**

* Test: `arr.filter(Boolean).join(" ")"
* Description: This benchmark tests the performance of filtering an array and then joining its elements with a string.
* Pros:
	+ Simple and easy to understand
	+ Provides a good baseline for comparison
* Cons:
	+ Limited functionality compared to other alternatives
* Other considerations: This benchmark is useful when you need to test the performance of array operations.

In general, the benchmarks suggest that Clsx is the fastest followed by Objstr. Classcat is slower due to its class creation overhead. The `Arr.filter(Boolean).join(" ")` benchmark is relatively slow compared to the others.

Related benchmarks:

classcat, clsx, obj-str, vanilla, merge-class-names (version: 0)

Comparing performance of: classcat(arr) vs classcat(obj) vs clsx(arr) vs clsx(obj) vs objstr(obj) vs arr.filter(Boolean).join(" ") vs merge-class-names(arr) vs merge-class-names(obj)

Created: 2 years ago by: Guest

Jump to the latest result

classcat(arr)

classcat(obj)

clsx(arr)

clsx(obj)

objstr(obj)

arr.filter(Boolean).join(" ")

merge-class-names(arr)

merge-class-names(obj)

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