Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Classnames vs CLSX vs [].filter(Boolean).join(" ")
(version: 0)
Compare CLSX vs Classnames vs an simpliest implementation of creating a template string
Comparing performance of:
classnames vs clsx vs Entries, filter, map, join
Created:
4 years ago
by:
Guest
Jump to the latest result
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 neco = [true, false, undefined, "lorem-ipsum"];
Tests:
classnames
let result = window.classNames("dolor-sit-amet", ...neco, undefined)
clsx
let result = window.clsx("dolor-sit-amet", ...neco, undefined)
Entries, filter, map, join
function cx(...input) { return input.filter(Boolean).join(" "); } let result = cx("dolor-sit-amet", ...neco, undefined)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
classnames
clsx
Entries, filter, map, join
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
3 months ago
)
User agent:
Mozilla/5.0 (Android 13; Mobile; rv:136.0) Gecko/136.0 Firefox/136.0
Browser/OS:
Firefox Mobile 136 on Android
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
classnames
2441603.5 Ops/sec
clsx
3211603.8 Ops/sec
Entries, filter, map, join
2814990.2 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks. **Benchmark Overview** The provided JSON represents a benchmark that compares three different approaches to creating a template string in JavaScript: 1. `classnames` 2. `clsx` 3. A simple implementation using `Entries`, `filter`, `map`, and `join` **Classnames vs CLSX vs [] .filter(Boolean).join(" ")** `Classnames` is a popular library for working with CSS class names in JavaScript. It allows you to easily create classes from an array of strings. `CLSX` (short for Class Syntax eXtension) is a library that provides a more concise syntax for conditionally applying CSS classes. The benchmark tests the performance of these two libraries, as well as a simple implementation using `Entries`, `filter`, `map`, and `join`. **Options Compared** The three options compared are: 1. **`classnames`**: A popular library for working with CSS class names. * Pros: Easy to use, well-maintained, and widely adopted. * Cons: May be slower due to the overhead of a library. 2. **`clsx`**: A lightweight library for conditionally applying CSS classes. * Pros: Fast, concise, and easy to use. * Cons: May not be as widely adopted or well-maintained as `classnames`. 3. **`[] .filter(Boolean).join(" ")`**: A simple implementation using built-in JavaScript methods. * Pros: Extremely lightweight and fast, with no dependencies. * Cons: May require more setup and boilerplate code. **Library Analysis** 1. **`Classnames`**: As mentioned earlier, `classnames` is a popular library for working with CSS class names. It provides a convenient API for creating classes from an array of strings. The benchmark tests the performance of this library in creating a template string. 2. **`clsx`**: `CLSX` is a lightweight library that provides a concise syntax for conditionally applying CSS classes. The benchmark tests the performance of this library in creating a template string. **JavaScript Syntax and Features** The benchmark does not use any special JavaScript features or syntax beyond what's required to test the three options. **Other Considerations** When choosing between these options, consider the trade-offs between performance, readability, and maintainability. If you need a simple, lightweight solution with no dependencies, the `[] .filter(Boolean).join(" ")` approach might be the best choice. However, if you prioritize ease of use and convenience, `classnames` or `clsx` might be a better fit. **Alternative Options** If you're interested in exploring other options, here are a few alternatives: 1. **`DOM-Utils`**: A library that provides utility functions for working with the DOM, including string manipulation. 2. **`Template literals`**: JavaScript's built-in template literals feature can be used to create strings with placeholders and values. 3. **`String.prototype.replace()`**: Another built-in method for replacing substrings in a string. Keep in mind that these alternatives might not provide the same level of convenience or performance as `classnames`, `clsx`, or the simple implementation using `Entries`, `filter`, `map`, and `join`.
Related benchmarks:
_.compact vs filter(Boolean)
_.compact vs filter(Boolean) vs filter(element => element)
.filter(Boolean) vs .filter(e => e)
vs aaasassa
double-bang-vs-boolean-vs-unfedined-cast
Comments
Confirm delete:
Do you really want to delete benchmark?