Benchmark: Get bem classname

Script Preparation code:

var getBemClassName =
	(block) =>
	(elem, mod) => {
		const isNonEmptyString = (str) => typeof str === 'string' && str.length > 0;
		const hasElem = isNonEmptyString(elem);
		const hasMod = isNonEmptyString(mod);

		if (hasElem && hasMod) return `${block}__${elem}--${mod}`;
		if (!hasElem && hasMod) return `${block}--${mod}`;
		if (hasElem && !hasMod) return `${block}__${elem}`;

		return block;
	};

var getModuleBemClassName =
	(styles) =>
	(block) =>
	(elem, mod) =>
		styles[getBemClassName(block)(elem, mod)];

var STYLES = {
  'block': 'block',
  'block--mod1': 'block--mod1',
  'block--mod2': 'block--mod2',
  'block__element': 'block__element',
  'block__element--mod1': 'block__element--mod1',
  'block__element--mod2': 'block__element--mod2',
  'block__element2': 'block__element2'
};
var KEYS = Object.keys(STYLES);

Tests:

via object
var c1 = STYLES['block']; var c2 = STYLES['block--mod1']; var c3 = STYLES['block--mod2']; var c4 = STYLES['block__element']; var c5 = STYLES['block__element--mod1']; var c6 = STYLES['block__element--mod2']; var c7 = STYLES['block__element2'];
via bem func with modules
var bem = getModuleBemClassName(STYLES)('block') var c1 = bem(); var c2 = bem(undefined, 'mod1'); var c3 = bem(undefined, 'mod2'); var c4 = bem('element'); var c5 = bem('element', 'mod1'); var c6 = bem('element', 'mod2'); var c7 = bem('element2');
classname generation with bem func
var bem = getBemClassName('block') var c1 = bem(); var c2 = bem(undefined, 'mod1'); var c3 = bem(undefined, 'mod2'); var c4 = bem('element'); var c5 = bem('element', 'mod1'); var c6 = bem('element', 'mod2'); var c7 = bem('element2');
manual classname generation
var c1 = 'block'; var c2 = 'block--mod1'; var c3 = 'block--mod2'; var c4 = 'block__element'; var c5 = 'block__element--mod1'; var c6 = 'block__element--mod2'; var c7 = 'block__element2';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
via object
via bem func with modules
classname generation with bem func
manual classname generation

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: 7 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Browser/OS: Chrome 117 on Linux

View result in a separate tab

Test name	Executions per second
via object	3678596.0 Ops/sec
via bem func with modules	724640.9 Ops/sec
classname generation with bem func	3911197.0 Ops/sec
manual classname generation	1405935000.0 Ops/sec

Get bem classname (version: 4)

Comparing performance of: via object vs via bem func with modules vs classname generation with bem func vs manual classname generation

Created: one year ago by: Registered User

Jump to the latest result

via object

via bem func with modules

classname generation with bem func

manual classname generation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A