Benchmark: Rewrite multiple classes (setAttribute vs. className vs. classList vs setAttribute=List vs className=List)

HTML Preparation code:

<div id="foo" class="a b c"></div>

AخA
 
<div id="foo" class="a b c"></div>

Tests:

setAttribute

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    var classes = (0 == i % 2) ? "1 2 3" : "4 5 6";
	element.setAttribute("class", classes);
}

 
var element = document.getElementById("foo");var i = 1000;while (i--) {    var classes = (0 == i % 2) ? "1 2 3" : "4 5 6";    element.setAttribute("class", classes);}

className

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    var classes = (0 == i % 2) ? "1 2 3" : "4 5 6";
    element.className = classes;
}

 
var element = document.getElementById("foo");var i = 1000;while (i--) {    var classes = (0 == i % 2) ? "1 2 3" : "4 5 6";    element.className = classes;}

classList

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"];
    element.classList.remove(...element.classList);
    element.classList.add(...classes);
}

 
var element = document.getElementById("foo");var i = 1000;while (i--) {    var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"];    element.classList.remove(...element.classList);    element.classList.add(...classes);}

setAttribte=List

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"];
	element.setAttribute("class", classes.join(' '));
}

 
var element = document.getElementById("foo");var i = 1000;while (i--) {    var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"];    element.setAttribute("class", classes.join(' '));}

className=List

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"];
	element.className = classes.join(' ');
}

 
var element = document.getElementById("foo");var i = 1000;while (i--) {    var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"];    element.className = classes.join(' ');}

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
setAttribute
className
classList
setAttribte=List
className=List

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; rv:109.0) Gecko/20100101 Firefox/119.0

Browser/OS: Firefox 119 on Linux

View result in a separate tab

Test name	Executions per second
setAttribute	3831.8 Ops/sec
className	4448.7 Ops/sec
classList	679.6 Ops/sec
setAttribte=List	2880.0 Ops/sec
className=List	3150.9 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated 7 months ago):

Let's break down what's being tested and analyzed in this benchmark.

What is being compared?

The benchmark compares five different approaches to set multiple CSS classes on an HTML element:

setAttribute method
className property
classList API (with add() and remove() methods)
setAttribute method with a list of classes joined by spaces (setAttribte=List)
className property with a list of classes joined by spaces (className=List)

What is being tested?

The test case creates an HTML element with the ID "foo" and sets multiple CSS classes on it using each of the five approaches, iterating 1000 times to simulate a large number of executions. The goal is to measure which approach performs best in terms of execution speed.

Pros and cons of each approach:

setAttribute: Pros: simple, widely supported; Cons: can be slower due to string concatenation.
className: Pros: easy to use, fast; Cons: can lead to inefficient class list if not properly managed.
classList: Pros: efficient, easy to manage multiple classes; Cons: may require more code and overhead for add/remove operations.
setAttribute=List: Pros: similar to setAttribute, but with a list of classes joined by spaces; Cons: may be slower than className or classList.
className=List: Pros: fast, easy to use; Cons: can lead to inefficient class list if not properly managed.

Library and special JS features:

No external libraries are used in this benchmark. However, the test case does utilize some modern JavaScript features:

The ... operator (spread syntax) is used in the classList approach to pass a list of classes as arguments.
The [ ] notation (array literal) is used to create an array of class names.

Other considerations:

Browser compatibility and performance may vary depending on the specific browser and version being tested.
The results may be influenced by various factors, such as caching, JavaScript engine optimizations, or other browser-specific features.

Alternatives:

Other approaches to set multiple CSS classes on an HTML element include:

Using a library like jQuery, which provides a more convenient API for managing class lists.
Implementing a custom solution using a string concatenation approach, similar to setAttribute.
Utilizing CSS preprocessors like Sass or Less to generate CSS classes and reduce the need for JavaScript manipulation.

Keep in mind that these alternatives may have their own performance implications and trade-offs, which should be carefully considered when choosing an approach.

LLMs can make mistakes. Check important info.

Let's break down what's being tested and analyzed in this benchmark.

**What is being compared?**

The benchmark compares five different approaches to set multiple CSS classes on an HTML element:

1. `setAttribute` method
2. `className` property
3. `classList` API (with `add()` and `remove()` methods)
4. `setAttribute` method with a list of classes joined by spaces (`setAttribte=List`)
5. `className` property with a list of classes joined by spaces (`className=List`)

**What is being tested?**

**Pros and cons of each approach:**

1. **setAttribute**: Pros: simple, widely supported; Cons: can be slower due to string concatenation.
2. **className**: Pros: easy to use, fast; Cons: can lead to inefficient class list if not properly managed.
3. **classList**: Pros: efficient, easy to manage multiple classes; Cons: may require more code and overhead for add/remove operations.
4. **setAttribute=List**: Pros: similar to `setAttribute`, but with a list of classes joined by spaces; Cons: may be slower than `className` or `classList`.
5. **className=List**: Pros: fast, easy to use; Cons: can lead to inefficient class list if not properly managed.

**Library and special JS features:**

No external libraries are used in this benchmark. However, the test case does utilize some modern JavaScript features:

* The `...` operator (spread syntax) is used in the `classList` approach to pass a list of classes as arguments.
* The `[ ]` notation (array literal) is used to create an array of class names.

**Other considerations:**

* Browser compatibility and performance may vary depending on the specific browser and version being tested.
* The results may be influenced by various factors, such as caching, JavaScript engine optimizations, or other browser-specific features.

**Alternatives:**

Other approaches to set multiple CSS classes on an HTML element include:

1. Using a library like jQuery, which provides a more convenient API for managing class lists.
2. Implementing a custom solution using a string concatenation approach, similar to `setAttribute`.
3. Utilizing CSS preprocessors like Sass or Less to generate CSS classes and reduce the need for JavaScript manipulation.

Keep in mind that these alternatives may have their own performance implications and trade-offs, which should be carefully considered when choosing an approach.

Related benchmarks:

Rewrite multiple classes (setAttribute vs. className vs. classList vs setAttribute=List vs className=List) (version: 0)

Rewrite multiple classes setAttribute vs. className vs. classList vs. setAttribute=List vs. className=List

Comparing performance of: setAttribute vs className vs classList vs setAttribte=List vs className=List

Created: one year ago by: Guest

Jump to the latest result