Benchmark: classlist vs classname

HTML Preparation code:

<div id='s'></div>
<div id='s2'></div>

Tests:

classlist
let node = document.getElementById('s'), whitelist = ['add', 'remove', 'toggle']; function classlist(element, actions) { for (let i = 0, n = whitelist.length; i < n; i++) { let action = whitelist[i], classnames = actions[action], list = []; if (!classnames) { continue; } else if (!Array.isArray(classnames)) { classnames = [classnames]; } for (let j = 0, o = classnames.length; j < o; j++) { let classname = classnames[j], type = typeof classname; if (classname && (type === "string" || type === "number")) { list.push(classname); } } if (list) { element.classList[action](...list); } } } classlist(node, { add: ['foo', 'bar', 'baz', 'bam'], remove: ['bam'] });
classname
let node = document.getElementById('s2'); function classlist(classes, names) { let type = typeof names; if ((type === "string" || type === "number") && !classes.includes(names)) { classes.push(names); } else if (Array.isArray(names)) { for (let i = 0, n = names.length; i < n; i++) { classes = classlist(classes, names[i]); } } else if (type === 'object') { for (let key in names) { let value = names[key]; if (value) { if (value === 'toggle') { key = classes.includes(key) ? { [key]: false } : [key]; } classes = classlist(classes, key); } else { let index = classes.indexOf(key); if (index > -1) { classes.splice(index, 1); } } } } return classes; } node.className = classlist(node.className.split(' '), ["foo", ["bar", { baz: true, bam: false }]]).join(' ');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classlist
classname

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Linux

View result in a separate tab

Test name	Executions per second
classlist	89871.7 Ops/sec
classname	451775.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares the performance of two approaches to manipulate CSS class names in JavaScript: `classlist` and `classname`.

**What is tested?**

In this benchmark, the following aspects are compared:

* **Library usage**: Both benchmarks use the same HTML structure with two `<div>` elements. However, they differ in how they handle class manipulation.
	+ `classlist`: Uses a custom function to iterate through an array of class names and apply them to the element's class list using `classList[action]`.
	+ `classname`: Uses another custom function to manipulate class names, which involves splitting the current class name, applying transformations (e.g., adding or removing classes), and joining the resulting class names.
* **Performance**: The benchmark measures the number of executions per second for each approach.

**Options compared**

Two options are being compared:

1. `classlist`: Uses an array-based approach to manipulate class names.
2. `classname`: Uses a more complex, object-based approach to manipulate class names.

**Pros and Cons of each approach:**

* **`classlist`**
	+ Pros:
		- Simple and concise code.
		- Easy to understand and maintain.
	+ Cons:
		- May be slower due to the use of array methods (e.g., `includes`, `push`) and function calls.
* **`classname`**
	+ Pros:
		- More flexible and powerful, as it can handle complex class name transformations.
	+ Cons:
		- More verbose code, which may lead to maintenance issues.

**Library usage**

In this benchmark, the following libraries or built-in JavaScript features are used:

* `classList`: A DOM API method for manipulating an element's class list.
* `Array.prototype.includes()`, `Array.prototype.push()`: Built-in array methods.
* `Object.keys()`, `Object.prototype.hasOwnProperty.call()`: Built-in object methods.

**Special JS feature or syntax**

The benchmark uses the following special JavaScript features:

* Function arrow notation (`=>`)
* Rest parameters (`...`)

These features are not specific to the comparison of `classlist` and `classname`, but rather part of the overall JavaScript ecosystem.

**Other alternatives**

If you were to optimize or reimplement this benchmark, consider exploring alternative approaches:

* Using a different library or framework that provides more efficient class manipulation methods.
* Implementing custom caching mechanisms to reduce repeated computations.
* Profiling and optimizing individual components of the code to improve performance.
* Considering the use of Web Workers or other parallelization techniques to offload computationally expensive tasks.

Keep in mind that these alternatives would likely require significant modifications to the existing benchmark, as they aim to address specific performance bottlenecks or provide alternative solutions for class manipulation.

Related benchmarks:

classlist vs classname (version: 0)

Comparing performance of: classlist vs classname

Created: 7 years ago by: Guest

Jump to the latest result

classlist

classname

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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