Benchmark: data-attribute vs className

HTML Preparation code:

<div id="foo"></div>
<style>
  #foo {
    height: 50px;
    box-shadow: 0 0 0 red;
  }
  #foo.bar {
    box-shadow: 0 0 0 3px red;
  }
  #foo[data-baz] {
  }
</style>

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = "bar"; }
data-attribute
var element = document.getElementById("foo"); var boxShadow = element.style.boxShadow.split(' '); boxShadow[3] = '3px' boxShadow = boxShadow.join(' '); var i = 1000; while (i--) { element.setAttribute('baz', "1"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
data-attribute

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
className	3327.3 Ops/sec
data-attribute	1481.4 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark test case.

**Benchmark Description:**

The benchmark compares two different approaches to setting a CSS property on an HTML element:

1. **className**: Using the `className` property of an HTML element to set a CSS class, which in turn applies a specific style (in this case, a box shadow).
2. **data-attribute**: Using a data attribute (`[data-baz]`) to apply a style.

**Test Case Description:**

The test case consists of two individual tests:

1. **className**: This test sets the `className` property of an HTML element (`<div id="foo"></div>`) to `"bar"`, which applies the CSS class `.bar { box-shadow: 0 0 0 3px red; }`. The test then executes a loop of 1000 iterations, setting the `className` property inside the loop.
2. **data-attribute**: This test sets a data attribute (`[data-baz]`) on an HTML element and then applies a style by modifying the box shadow property using JavaScript.

**Test Results:**

The latest benchmark result shows that:

* The **className** approach executes at a rate of 4678.65 executions per second.
* The **data-attribute** approach executes at a rate of 2815.70 executions per second.

**Library and Special JS Features/Syntax:**

No specific libraries or special JavaScript features are used in this test case.

**Pros/Cons:**

The main difference between the two approaches is how they apply styles:

* `className` uses CSS classes to apply styles, which can be more efficient for applying multiple styles.
* `data-attribute` uses a custom attribute to apply a specific style, which might be less efficient due to the extra overhead of setting and retrieving attributes.

**Other Considerations:**

When deciding between these approaches:

* If you need to apply multiple styles or want to follow a consistent CSS class naming convention, using `className` might be more suitable.
* If you only need to apply a specific style for a particular reason (e.g., debugging), using a data attribute might be acceptable.

**Other Alternatives:**

Besides the two approaches compared in this test case, other alternatives include:

* Using inline styles (`<div id="foo" style="box-shadow: 0 0 0 3px red;"></div>`) to set styles directly on an HTML element.
* Creating a CSS class and then setting it using JavaScript, similar to the `className` approach but with more control over the class name.
* Using a library or framework that provides a way to manage styles, such as React's `styled-components`.

Related benchmarks:

data-attribute vs className (version: 7)

Comparing performance of: className vs data-attribute

Created: 5 years ago by: Registered User

Jump to the latest result

className

data-attribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):