Class names perf comparison

Benchmark created on


Test runner

Ready to run.

Testing in
TestOps/sec
Simple one-liner
const cx = (...args) => args.filter(Boolean).join(' ');

const results = [];
for (let i = 0; i < 10000; i++) {
	results.push(cx('foo', false, 'bar-baz', '', 'this-is-a-really-long-class-name'))
}
ready
Reduce
const cx = (...args) => args.reduce((p, c) => c ? (p && p + ' ') + c : p, '');

const results = [];
for (let i = 0; i < 10000; i++) {
	results.push(cx('foo', false, 'bar-baz', '', 'this-is-a-really-long-class-name'))
}
ready
clsx/lite
function cx() {
	var i=0, tmp, str='', len=arguments.length;
	for (; i < len; i++) {
		if (tmp = arguments[i]) {
			if (typeof tmp === 'string') {
				str += (str && ' ') + tmp;
			}
		}
	}
	return str;
}

const results = [];
for (let i = 0; i < 10000; i++) {
	results.push(cx('foo', false, 'bar-baz', '', 'this-is-a-really-long-class-name'))
}
ready
classix
function cx() {
  let str = "",
    i = 0,
    arg;

  for (; i < arguments.length; ) {
    if ((arg = arguments[i++]) && typeof arg === "string") {
      str && (str += " ");
      str += arg;
    }
  }
  return str;
}

const results = [];
for (let i = 0; i < 10000; i++) {
	results.push(cx('foo', false, 'bar-baz', '', 'this-is-a-really-long-class-name'))
}
ready
clsx/lite (args spread)
function cx(...args) {
	var i=0, tmp, str='', len=args.length;
	for (; i < len; i++) {
		if (tmp = args[i]) {
			if (typeof tmp === 'string') {
				str += (str && ' ') + tmp;
			}
		}
	}
	return str;
}

const results = [];
for (let i = 0; i < 10000; i++) {
	results.push(cx('foo', false, 'bar-baz', '', 'this-is-a-really-long-class-name'))
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.