Benchmark: className vs getAttribute('class') vs classList

HTML Preparation code:

<div id="root" class="whopper w-screen h-screen bg-neutral-150 flex-row center">
  <div class="whiplash pos-rel w-500 min-h-full bg-neutral-250 flex-col overflow-hidden">
    <div class="whoop">
      <div class="wheep">
        <div class="whyne-stein pos-rel mg-x-200 mg-y-auto pd-500 bg-neutral-500 cursor-pointer">
          <span class="joker text-bold text-xl text-white bg-black pd-400 rounded-full">WHY SO SERIOUS?</span>
        </div>
      </div>
    </div>
  </div>
</div>

Script Preparation code:

function tagElementsByAttribute(children) {
	for (let i = 0, child, cls; i < children.length; i++) {
    	child = children[i];
      	child.setAttribute('class', child.getAttribute('class') + ' tagged');
     	if (child.firstElementChild) {
        	tagElementsByAttribute(child.children);
        }
    }
}

function tagElementsByClassName(children) {
	for (let i = 0, child, cls; i < children.length; i++) {
    	child = children[i];
      	child.className += ' tagged';
     	if (child.firstElementChild) {
        	tagElementsByClassName(child.children);
        }
    }
}

function tagElementsByClassList(children) {
	for (let i = 0, child, cls; i < children.length; i++) {
    	child = children[i];
     	child.classList.add('tagged');
     	if (child.firstElementChild) {
        	tagElementsByClassList(child.children);
        }
    }
}

Tests:

get/set Attribute
tagElementsByAttribute(document.getElementById('root').children);
+= className
tagElementsByClassName(document.getElementById('root').children);
classList.add()
tagElementsByClassList(document.getElementById('root').children);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
get/set Attribute
+= className
classList.add()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

classList.add()

39K/s

get/set Attribute

317/s

+= className

152/s

View exact numbers

Test name	Executions per second
✓ classList.add()	38,897 Ops/sec
get/set Attribute	317 Ops/sec
+= className	152 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark is designed to compare three different approaches for adding a class to an HTML element: `getAttribute('class')`, `+= className`, and `classList.add()`.

**Script Preparation Code**

The script preparation code defines two recursive functions:

1. `tagElementsByAttribute(children)`: This function takes the children of an element as input and sets the 'class' attribute of each child to a new value that includes the string ' tagged'. If a child has a firstElementChild, it calls itself recursively with the child's children.
2. `tagElementsByClassName(children)`: This function is similar to the previous one, but instead of setting the 'class' attribute directly, it appends the string ' tagged' to the existing class name of each element. If an element has a firstElementChild, it calls itself recursively with the child's children.
3. `tagElementsByClassList(children)`: This function adds a new class called 'tagged' to each element using its `classList` property. If an element has a firstElementChild, it calls itself recursively with the child's children.

**Html Preparation Code**

The HTML preparation code defines a simple DOM structure with multiple elements nested inside each other.

**Individual Test Cases**

There are three test cases:

1. **get/set Attribute**: This test case uses `tagElementsByAttribute` to add the class ' tagged' to the root element.
2. **+= className**: This test case uses `tagElementsByClassName` to add the class ' tagged' to the root element by appending it to the existing class name.
3. **classList.add()**: This test case uses `tagElementsByClassList` to add the class ' tagged' to the root element using its `classList` property.

**Library and Special JS Features**

* No specific library is used in this benchmark, other than the standard DOM API.
* The test cases use the `firstElementChild` property, which is a CSSOM feature that allows you to access the first child element of an HTML element. This feature was introduced in ECMAScript 2015 (ES6).

**Pros and Cons**

Here's a brief summary of each approach:

1. **getAttribute('class')**: This method is simple but can be slower because it involves parsing the class attribute string.
2. **+= className**: This method is faster than `getAttribute('class')` but may lead to slower performance if the class names are long or complex, as this can cause additional parsing and DOM manipulation overhead.
3. **classList.add()**: This method is generally the fastest and most efficient way to add a class to an element, especially for large numbers of elements.

**Other Alternatives**

If you need to compare other approaches, here are some alternatives:

* Using `style` property instead of `classList`: You can set the style attribute directly using dot notation (e.g., `element.style.display = 'block';`). This approach is faster than using `classList.add()` but may be less intuitive for developers who are not familiar with CSS styles.
* Using a library like jQuery: jQuery provides a `addClass()` method that can be used to add classes to elements, which might affect the performance compared to native JavaScript approaches.

Keep in mind that these alternatives would require significant changes to the benchmark script preparation code and HTML structure.

className vs getAttribute('class') vs classList (version: 0) Benchmark.js

Comparing performance of: `get/set Attribute vs += className vs classList.add()`

Created: 4 years ago by: Guest

Go to the latest result

get/set Attribute

+= className

classList.add()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

className vs getAttribute('class') vs classList (version: 0) Benchmark.js

Comparing performance of: get/set Attribute vs += className vs classList.add()

Created: 4 years ago by: Guest

Go to the latest result

get/set Attribute

+= className

classList.add()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `get/set Attribute vs += className vs classList.add()`