Benchmark: toggle classname string vs array vs classList

HTML Preparation code:

<div id="foo" class="some other classname"></div>

Tests:

string
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className += " bar"; element.className = element.className.slice(0, -4); }
array
var element = document.getElementById("foo"); var i = 1000; while (i--) { var items = element.className.split(' ') if (items.indexOf('bar') < 0) { items.push('bar'); element.className = items.join(' ') } items = element.className.split(' ') items.pop() element.className = items.join(' '); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); element.classList.remove("bar"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
string
array
classList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko

Browser/OS: IE 11 on Windows

View result in a separate tab

Test name	Executions per second
string	246.9 Ops/sec
array	218.0 Ops/sec
classList	170.7 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested.

**Benchmark Overview**

The test measures the performance of three different approaches to toggle a class name on an HTML element:

1. **String manipulation**: This approach uses string concatenation and slicing to add or remove the "bar" class from the element.
2. **Array manipulation**: This approach splits the current class names into an array, adds or removes the "bar" class, and then joins them back together as a string.
3. **classList API**: This approach uses the `classList` property to add or remove the "bar" class from the element.

**Options Compared**

The three options are compared in terms of their performance (number of executions per second). The benchmark is run on an IE 11 browser and Windows desktop platform.

**Pros and Cons of Each Approach**

1. **String Manipulation**
	* Pros: Simple, easy to implement.
	* Cons:
		+ Can be slow due to string concatenation and slicing operations.
		+ May lead to performance issues if the class name is very long.
2. **Array Manipulation**
	* Pros:
		+ Can be faster than string manipulation since it avoids creating intermediate strings.
		+ Allows for easier management of multiple class names.
	* Cons:
		+ Requires more memory and processing power due to array operations.
3. **classList API**
	* Pros:
		+ Fast and efficient, as it uses native DOM methods.
		+ Easy to use and doesn't require explicit string manipulation.
	* Cons: None notable in this case.

**Libraries and Special JS Features**

None of the test cases use any libraries or special JavaScript features beyond the standard DOM API.

**Other Considerations**

When choosing between these approaches, consider the following:

* If you need to manage multiple class names, array manipulation might be a better choice.
* If performance is critical, the `classList` API is likely the best option due to its native implementation.
* For simple cases where class name changes are infrequent, string manipulation might be sufficient.

**Alternatives**

If you're interested in exploring alternative approaches, consider:

* Using a library like Lodash or underscore.js for array manipulation, which can provide more concise and readable code.
* Implementing a custom solution using a different algorithm or data structure, such as a trie or suffix tree, to optimize class name lookup and manipulation.
* Using a CSS-in-JS approach to manage class names, which can eliminate the need for explicit string manipulation.

Keep in mind that these alternatives may have trade-offs in terms of performance, memory usage, or ease of implementation.

Related benchmarks:

toggle classname string vs array vs classList (version: 0)

Comparing performance of: string vs array vs classList

Created: one year ago by: Guest

Jump to the latest result

string

array

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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