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

Latest run results:

Run details: (Test run date: one year 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.2 Ops/sec
manual classname generation	1405934976.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its options for you.

**Overview**

MeasureThat.net is a platform that allows users to create and run JavaScript microbenchmarks. The provided benchmark compares four approaches for generating class names in BEM (Block-Element-Modifier) notation.

**Benchmark Definition**

The benchmark definition provides two scripts: `getBemClassName` and `getModuleBemClassName`. Both functions take two arguments, `block` and `elem`, which represent the block and element parts of a BEM notation. The functions return a class name string that can be used for CSS purposes.

**Options Compared**

The benchmark compares four approaches:

1. **Manual Classname Generation**: This approach uses string concatenation to generate class names.
```javascript
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';
```
Pros: Simple and straightforward.
Cons: May be slower due to string concatenation.

2. **Classname Generation with BEM Function (via bem func)**:
```javascript
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');
```
Pros: Uses the `getBemClassName` function to generate class names.
Cons: May be slower due to function calls.

3. **Classname Generation with BEM Function (via bem func) and Modules**:
```javascript
var bem = getModuleBemClassName(STYLES)
var c1 = bem('block')
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');
```
Pros: Uses the `getModuleBemClassName` function to generate class names with modules.
Cons: May be slower due to function calls and module lookups.

4. **Classname Generation via Object**:
```javascript
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'];
```
Pros: Fast and efficient, as it uses object lookups.
Cons: May be less readable due to the use of objects.

**Results**

The benchmark results show that the fastest approach is **Classname Generation via Object**, which executes at an average of 3911197.25 executions per second on a Chrome 117 browser. The other approaches are slower, with Manual Classname Generation being the slowest.

Note that the actual performance difference between these approaches may vary depending on the specific use case and requirements.

Related benchmarks:

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

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):