Benchmark: data attributes versus classes

HTML Preparation code:

<div id="foo"></div>

Script Preparation code:

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
  	element.append(document.createElement('div'));
}

Tests:

attribute
var element = document.getElementById("foo"); for (const div of element.querySelectorAll('div')) { div.setAttribute("data-foo", "1"); } document.querySelectorAll('[data-foo]').forEach(div => div.removeAttribute('data-is-foo'));
classes
var element = document.getElementById("foo"); for (const div of element.querySelectorAll('div')) { div.classList.add("is_foo", "foo_type_1"); } element.querySelectorAll('.is_foo').forEach(element => element.classList.remove('is_foo', 'foo_type_1'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
attribute
classes

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
attribute	2137.8 Ops/sec
classes	613.0 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 provided benchmark and its test cases.

**Benchmark Overview**

The benchmark is designed to compare two approaches for setting attributes on HTML elements:

1. **Data Attributes**: Using `setAttribute()` with a data attribute (e.g., `data-foo`) to set values, and then removing it using `removeAttribute()`.
2. **Classes**: Using the `classList` API to add and remove classes (in this case, "is_foo" and "foo_type_1").

**Library and Framework Considerations**

In the first test case (`attribute`), a library is not explicitly mentioned, but the `document.getElementById()` method and the `querySelectorAll()` method are used. These methods are part of the DOM API, which is built into JavaScript.

In the second test case (`classes`), the `classList` API is used, which is also part of the DOM API.

**Test Case Analysis**

The two test cases differ in their approach:

1. **Attribute Test Case**: In this test, elements are appended to a container using `while` loop. Then, for each element, the `setAttribute()` method is used to set the data attribute (`data-foo`) and remove it immediately using `removeAttribute()`. The second part of the script uses `querySelectorAll()` to find all elements with the "data-foo" attribute.
2. **Class Test Case**: In this test, elements are appended to a container using a `for...of` loop. Then, for each element, the `classList.add()` method is used to add classes ("is_foo" and "foo_type_1"), followed by removing those classes using the `classList.remove()` method. The second part of the script uses another `querySelectorAll()` method to find all elements with the class "is_foo".

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

* **Data Attributes (Attribute Test Case)**:
	+ Pros: Faster setup, as it doesn't require parsing CSS rules.
	+ Cons: May lead to more complex attribute names, and might not be supported by older browsers or environments that don't support data attributes.
* **Classes (Class Test Case)**:
	+ Pros: More readable and maintainable code, as classes can provide a clear and concise way to group styles.
	+ Cons: May require parsing CSS rules, which can lead to slower performance.

**Special JavaScript Features**

There are no special features mentioned in the benchmark definitions.

**Alternatives**

Other alternatives for setting attributes or adding classes include:

* Using `style` attribute instead of `data-foo`
* Using CSS classes and `element.style.display = 'block';`
* Using a CSS-in-JS solution like styled-components or Emotion
* Using a library like jQuery to handle DOM manipulation

Keep in mind that these alternatives might have their own trade-offs, such as performance impact, code complexity, or compatibility issues.

Related benchmarks:

data attributes versus classes (version: 0)

Comparing performance of: attribute vs classes

Created: 2 years ago by: Guest

Jump to the latest result

attribute

classes

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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