Benchmark: Classnames vs clsx with different api

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/classnames@2.3.1/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clsx@1.1.1/dist/clsx.min.js"></script>

Tests:

classnames
window.classNames('uu-foo', { 'uu-foo_bar': true, 'uu-foo_baz': false });
clsx (classnames api)
window.clsx('uu-foo', { 'uu-foo_bar': true, 'uu-foo_baz': false });
clsx (objects)
window.clsx({ 'uu-foo': true, 'uu-foo_bar': true, 'uu-foo_baz': false });
clsx (arguments)
window.clsx('uu-foo', true && 'uu-foo_bar', false && 'uu-foo_baz');
clsx (array)
window.clsx(['uu-foo', true && 'uu-foo_bar', false && 'uu-foo_baz']);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx (classnames api)
clsx (objects)
clsx (arguments)
clsx (array)

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classnames	3768372.0 Ops/sec
clsx (classnames api)	5334643.0 Ops/sec
clsx (objects)	4931569.0 Ops/sec
clsx (arguments)	5285284.0 Ops/sec
clsx (array)	4649066.0 Ops/sec

Classnames vs clsx with different api (version: 0)

Comparing performance of: classnames vs clsx (classnames api) vs clsx (objects) vs clsx (arguments) vs clsx (array)

Created: 2 years ago by: Guest

Jump to the latest result

classnames

clsx (classnames api)

clsx (objects)

clsx (arguments)

clsx (array)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A