Benchmark: className vs. classList (comparing and adding)4

HTML Preparation code:

<div id="foo" class="folder open filtered"></div>

Tests:

className
var p = document.getElementById("foo"); var i = 1000; while (i--) { if (p.className.indexOf('folder') != -1) p.className = 'folder open'+ (p.className.indexOf('filtered') != -1 ? 'filtered ' : '') +'parent'; }
classList
var p = document.getElementById("foo"); var i = 1000; while (i--) { if(p.classList.contains("folder")) { p.classList.add('open', 'parent'); if (p.className.indexOf('filtered') != -1) p.classList.add('filtered'); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
classList

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark definition and test cases for you.

**What is tested on the provided JSON?**

The provided JSON represents two microbenchmarks that compare the performance of JavaScript classes (`className`) with class lists (`classList`). The benchmarks test the addition and updating of CSS classes to an HTML element with a specific ID (`foo`).

**Options compared:**

There are two approaches being compared:

1. **Using `className`:**
	* The benchmark uses the `className` property to update the classes.
	* It checks if the class 'folder' exists in the current class list and adds 'open' and 'parent' if it does.
	* If 'filtered' is already present, it adds another 'filtered'.
2. **Using `classList`:**
	* The benchmark uses the `classList` property to add and remove classes.
	* It checks if the class 'folder' is contained in the current class list using `contains()`.
	* If it is, it adds 'open' and 'parent' to the class list using `add()`.
	* If 'filtered' is already present, it adds another 'filtered'.

**Pros and Cons:**

**Using `className`:**

Pros:

* Simpler implementation
* Fewer DOM mutations (only one `className` property update)

Cons:

* Less flexible, as it only checks for class presence using `indexOf()`.
* May be slower due to string searching in the class list.

**Using `classList`:**

Pros:

* More flexible, as it uses a `contains()` method for checking class presence.
* Faster, as it relies on a native method and avoids string searching in the class list.

Cons:

* More complex implementation
* More DOM mutations (multiple `classList` property updates).

**Other considerations:**

Both approaches have their advantages and disadvantages. The choice between them depends on the specific use case and performance requirements.

**Library usage:**

There is no explicit library usage mentioned in the benchmark definition, but it's worth noting that both approaches rely on modern JavaScript features (classes and `classList` property).

No special JavaScript feature or syntax is used in this benchmark.

**Alternative approaches:**

Other alternatives to consider for updating CSS classes include:

1. **Using a library like jQuery**: jQuery provides an efficient way to update CSS classes using its `toggleClass()` method.
2. **Using a custom DOM mutation approach**: Implementing a custom loop that updates the class list element by element, rather than relying on `classList` or `className`.
3. **Using Web APIs for CSS class manipulation**: Utilize newer web APIs like `CSSStyleDeclaration` and `DOMTokenList` to update CSS classes.

Keep in mind that these alternatives may have different performance characteristics and implementation complexities compared to the benchmarked approaches.

Related benchmarks:

className vs. classList (comparing and adding)4 (version: 0)

Comparing performance of: className vs classList

Created: 7 years ago by: Guest

Jump to the latest result

className

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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