Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Classnames vs CLSX vs light-classnames
(version: 5)
In doing my new package light-classnames. I'm trying to see if my package is faster than the other two major competitors/
Comparing performance of:
classnames vs clsx vs light-classnames
Created:
4 years ago
by:
Registered User
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.0/dist/clsx.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/light-classnames@0.0.3/dist/bundle.umd.min.js"></script>
Script Preparation code:
var str = 'style'; var obj = { 'style-2': true, 'style-3': false, 'style-4': 9, 'style-5': null }; var number = 6; var anotherStr = 'jigucha'; var moreObject = {a: undefined, b: 'asdf'}
Tests:
classnames
let result = window.classNames(str, obj, number, undefined, anotherStr, null, 0, moreObject)
clsx
let result = window.clsx(str, obj, number, undefined, anotherStr, null, 0, moreObject)
light-classnames
let result = window.lcn(str, obj, number, undefined, anotherStr, null, 0, moreObject)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
classnames
clsx
light-classnames
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
10 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Browser/OS:
Chrome 137 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
classnames
7252883.5 Ops/sec
clsx
8418081.0 Ops/sec
light-classnames
13588199.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the benchmark test case. **Overview** The benchmark tests three JavaScript libraries: `classnames`, `clsx`, and `light-classnames`. The test creates an object with multiple properties, including strings, numbers, booleans, and nulls. It then passes this object to each library along with a string and two numbers as arguments. The test measures the execution time for each library. **Library Descriptions** 1. **classnames**: This library is designed to generate a space-separated string of class names from an object. It's often used in conjunction with CSS classes to style HTML elements. 2. **clsx**: This library provides a more concise way of writing class name strings using the `+` operator. It's similar to `classnames`, but with a different API. 3. **light-classnames**: This is the library being benchmarked, which seems to be a lightweight alternative to `classnames`. **Options Compared** The three libraries are compared in terms of their execution speed. The test measures the number of executions per second for each library. **Pros and Cons** * **classnames**: * Pros: Well-established library with a large user base, easy to use. * Cons: May be slower than other alternatives due to its complexity. * **clsx**: * Pros: More concise API, potentially faster execution speed due to reduced overhead. * Cons: Smaller user base compared to `classnames`. * **light-classnames**: * Pros: Lightweight alternative, potentially faster execution speed. * Cons: May be less stable or have fewer features compared to other alternatives. **Other Considerations** * **Browser Support**: The benchmark is run on Firefox 128, which may not support the latest features or optimizations in modern browsers. Running the test on different browsers may provide a more accurate picture of each library's performance. * **JavaScript Engine**: The JavaScript engine used by Firefox 128 may impact the execution speed of each library. Optimizations for specific engines can affect the results. **Alternative Libraries** If `classnames`, `clsx`, or `light-classnames` are not suitable for your use case, you might consider alternative libraries like: * **lodash classNames**: A lightweight version of `classnames` with a simpler API. * **css-selectors`: A library that generates CSS selectors from an object, potentially offering better performance and features compared to `classnames`. * **dom-class-list**: A library that generates a class list for HTML elements, which may be more suitable for specific use cases. When choosing a library, consider factors like your project's requirements, the size of your user base, and any specific features or optimizations needed.
Related benchmarks:
Classnames vs CLSX vs Alternatives
Classnames vs CLSX vs Alternatives (2)
Classnames vs CLSX vs Alternatives vs custom
Classnames vs CLSX vs Alternatives (Nov 27, 2023)
Comments
Confirm delete:
Do you really want to delete benchmark?