Benchmark: toggle classname string vs array vs classList

HTML Preparation code:

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

AخA
 
<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);
}

 
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(' ');
}

 
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");
}

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
string
array
classList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months 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 6 months ago):

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:

String manipulation: This approach uses string concatenation and slicing to add or remove the "bar" class from the element.
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.
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

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.
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.
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.

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: 9 months ago by: Guest

Jump to the latest result