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 gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares the performance of two ways to modify an element's style in HTML: using `className` and using a data attribute (`data-baz`).

**Scenario:**

* Both tests involve adding a box shadow effect to a `<div>` element with the ID "foo". The CSS styles define different box shadows for classes ("bar") and data attributes ("[data-baz]").

**Options Compared:**

1. **`className` Approach:**
   * This test repeatedly sets the `className` of the element to "bar", triggering the corresponding CSS rule that applies a thicker box shadow. 
2. **Data Attribute Approach:**
   * This test uses JavaScript to set the `data-baz` attribute on the element (which has a defined CSS rule, but it doesn't explicitly apply any styling in this case). The benchmark focuses on the act of setting the attribute itself.

**Pros and Cons:**

* **`className` Approach:**
    * **Pros:**  Simpler code and potentially faster due to the browser's optimized class handling. This is generally a common practice for applying styles based on states.
    * **Cons:** May be less flexible if you need to apply very granular, conditional styles.

* **Data Attribute Approach:**
    * **Pros:** More specific data association (can store arbitrary values), potentially useful for complex interactions or custom JavaScript logic tied to the attribute's presence.
    * **Cons:** Can be more verbose and might not always be the most efficient for simple styling changes, especially if you have a lot of attributes.

**Alternatives:**

* **CSS Pseudo-classes:** For more dynamic style changes based on states (e.g., `:hover`, `:active`), CSS pseudo-classes are often a better choice than relying on JavaScript and attribute manipulation.
* **CSS Custom Properties (Variables):**  These allow you to define reusable styles that can be easily changed throughout your project, improving maintainability and reducing redundancy.

Let me know if you have any other questions about this benchmark or would like to explore specific code snippets in more detail!

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 gemma2:9b, generated one year ago):