Skip to content

Commit

Permalink
docs: update the benchmarks
Browse files Browse the repository at this point in the history
  • Loading branch information
merceyz committed Sep 8, 2019
1 parent 1ab1eab commit 14c5df6
Show file tree
Hide file tree
Showing 8 changed files with 101 additions and 64 deletions.
36 changes: 24 additions & 12 deletions benchmark/README.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,39 @@
# Benchmarks

Below are the benchmark results for `Node v11.14.0` and `clsx v1.0.4`.
To run the benchmarks yourself use `yarn benchmark`

To test these benchmarks yourself run `yarn benchmark`
Case one and two are extracted from https://github.com/mui-org/material-ui

Some of the cases are code extracted from https://github.com/mui-org/material-ui
| | |
| ---------- | ------ |
| Node | 12.9.0 |
| clsx | 1.0.4 |
| classnames | 2.2.6 |

# Results

`N/A` means the function call was optimized away and no library was used

```
# case_1.js - Extract properties, combine arguments, and conditional expression:
before x 725,714 ops/sec ±0.41% (92 runs sampled)
after x 7,403,876 ops/sec ±0.33% (92 runs sampled)
before - classnames x 455,076 ops/sec ±0.29% (89 runs sampled)
before - clsx x 515,270 ops/sec ±0.24% (93 runs sampled)
after - classnames x 2,147,313 ops/sec ±0.29% (94 runs sampled)
after - clsx x 7,170,564 ops/sec ±0.66% (89 runs sampled)
# case_2.js - Extract properties and combine arguments:
before x 402,253 ops/sec ±0.32% (92 runs sampled)
after x 4,443,619 ops/sec ±1.53% (91 runs sampled)
before - classnames x 270,775 ops/sec ±0.48% (93 runs sampled)
before - clsx x 288,193 ops/sec ±0.25% (93 runs sampled)
after - classnames x 1,644,390 ops/sec ±0.39% (94 runs sampled)
after - clsx x 4,097,308 ops/sec ±0.63% (93 runs sampled)
# case_3.js - String literals:
before x 7,271,738 ops/sec ±0.96% (92 runs sampled)
after x 850,938,371 ops/sec ±0.25% (93 runs sampled)
# case_3.js - Object with string literals:
before - classnames x 3,579,582 ops/sec ±0.38% (91 runs sampled)
before - clsx x 7,029,547 ops/sec ±0.58% (89 runs sampled)
after - N/A x 851,510,031 ops/sec ±0.26% (92 runs sampled)
# case_4.js - Unnecessary function calls:
before x 8,372,334 ops/sec ±0.49% (90 runs sampled)
after x 853,523,303 ops/sec ±0.23% (92 runs sampled)
before - classnames x 4,771,703 ops/sec ±0.40% (92 runs sampled)
before - clsx x 8,444,230 ops/sec ±0.32% (89 runs sampled)
after - N/A x 842,537,779 ops/sec ±0.26% (89 runs sampled)
```
25 changes: 13 additions & 12 deletions benchmark/cases/case_1.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
const clsx = require('clsx');
const getClassName = require('../getClassName');

const classes = {
Expand All @@ -14,9 +13,9 @@ const classes = {
const variant = 'buffer';
const color = 'secondary';

module.exports = [
'Extract properties, combine arguments, and conditional expression',
() => {
module.exports = {
title: 'Extract properties, combine arguments, and conditional expression',
before(clsx) {
return clsx(classes.bar, {
[classes.barColorPrimary]: color === 'primary' && variant !== 'buffer',
[classes.colorPrimary]: color === 'primary' && variant === 'buffer',
Expand All @@ -26,20 +25,22 @@ module.exports = [
[classes.bar2Buffer]: variant === 'buffer',
});
},
() => {
after(clsx) {
return clsx(
classes.bar,
(variant === 'indeterminate' || variant === 'query') && classes.bar2Indeterminate,
variant === 'buffer'
? [
classes.bar2Buffer,
color === 'primary' && classes.colorPrimary,
color === 'secondary' && classes.colorSecondary,
{
primary: classes.colorPrimary,
secondary: classes.colorSecondary,
}[color],
]
: [
color === 'primary' && classes.barColorPrimary,
color === 'secondary' && classes.barColorSecondary,
],
: {
primary: classes.barColorPrimary,
secondary: classes.barColorSecondary,
}[color],
);
},
];
};
41 changes: 25 additions & 16 deletions benchmark/cases/case_2.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
const clsx = require('clsx');
const getClassName = require('../getClassName');

const classes = {
Expand All @@ -25,9 +24,9 @@ const contained = false;
const fullWidth = true;
const disabled = false;

module.exports = [
'Extract properties and combine arguments',
() => {
module.exports = {
title: 'Extract properties and combine arguments',
before(clsx) {
return clsx(
classes.root,
{
Expand All @@ -47,28 +46,38 @@ module.exports = [
classNameProp,
);
},
() => {
after(clsx) {
return clsx(
classes.root,
classNameProp,
text && [
classes.text,
color === 'primary' && classes.textPrimary,
color === 'secondary' && classes.textSecondary,
{
primary: classes.textPrimary,
secondary: classes.textSecondary,
}[color],
],
contained && [
classes.contained,
color === 'primary' && classes.containedPrimary,
color === 'secondary' && classes.containedSecondary,
],
variant === 'outlined' && [
classes.outlined,
color === 'primary' && classes.outlinedPrimary,
color === 'secondary' && classes.outlinedSecondary,
{
primary: classes.containedPrimary,
secondary: classes.containedSecondary,
}[color],
],
disabled && classes.disabled,
fullWidth && classes.fullWidth,
color === 'inherit' && classes.colorInherit,
{
outlined: [
classes.outlined,
{
primary: classes.outlinedPrimary,
secondary: classes.outlinedSecondary,
}[color],
],
}[variant],
{
inherit: classes.colorInherit,
}[color],
);
},
];
};
12 changes: 5 additions & 7 deletions benchmark/cases/case_3.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
const clsx = require('clsx');

module.exports = [
'String literals',
() => {
module.exports = {
title: 'Object with string literals',
before(clsx) {
return clsx({
btn: true,
'col-md-1': true,
['btn-primary']: true,
});
},
() => {
after() {
return 'btn col-md-1 btn-primary';
},
];
};
12 changes: 5 additions & 7 deletions benchmark/cases/case_4.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
const clsx = require('clsx');

const isDisabled = true;

module.exports = [
'Unnecessary function calls',
() => {
module.exports = {
title: 'Unnecessary function calls',
before(clsx) {
return clsx({
btn: true,
'btn-foo': isDisabled,
'btn-bar': !isDisabled,
});
},
() => {
after() {
return 'btn ' + (isDisabled ? 'btn-foo' : 'btn-bar');
},
];
};
33 changes: 23 additions & 10 deletions benchmark/index.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
const Benchmark = require('benchmark');
const path = require('path');
const fs = require('fs');
const clsx = require('clsx');
const classnames = require('classnames');

function bench(name, description, before, after) {
console.log(`# ${name} - ${description}:`);
new Benchmark.Suite()
.add('before', before)
.add('after ', after)
.on('cycle', e => console.log(' ' + e.target))
.run();
console.log('');
function bench(name, { title, before, after }) {
console.log(`\n# ${name} - ${title}:`);

const suite = new Benchmark.Suite();

suite.add('before - classnames', () => before(classnames));
suite.add('before - clsx ', () => before(clsx));

// If the argument length is 0 then the function call has been optimized away
if (after.length === 0) {
suite.add('after - N/A ', after);
} else {
suite.add('after - classnames', () => after(classnames));
suite.add('after - clsx ', () => after(clsx));
}

suite.on('cycle', e => console.log(' ' + e.target));
suite.run();
}

const dir = path.join(__dirname, 'cases');
Expand All @@ -19,8 +31,9 @@ fs.readdir(dir, (err, files) => {
}

files.forEach(f => {
const c = require(path.join(dir, f));
const testCase = require(path.join(dir, f));

bench(f, ...c);
bench(f, testCase);
});
console.log();
});
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-tester": "^6.4.0",
"benchmark": "^2.1.4",
"classnames": "^2.2.6",
"clsx": "^1.0.4",
"cross-env": "^5.2.0",
"husky": "^3.0.0",
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1535,6 +1535,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"

classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==

cliui@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
Expand Down

0 comments on commit 14c5df6

Please sign in to comment.