Benchmark: style➜display VS setAttribute➜display

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.style.display = "none"; }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("style", "display:none"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute

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/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
className	1451.1 Ops/sec
setAttribute	2968.8 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares two ways to hide an HTML element: using the `style` property and using the `setAttribute()` method.

**Here's a breakdown:**

* **Test Case 1:  `className`**
    * Code: This test repeatedly sets the `display` style property of an element with the ID "foo" to "none".
    * Purpose: To measure the performance of directly manipulating the `style` property.

* **Test Case 2: `setAttribute`**
    * Code: This test uses `setAttribute()` to set the `style` attribute of the same element to "display: none".  
    * Purpose: To measure the performance of setting the style attribute indirectly through `setAttribute()`.

**Pros and Cons:**

* **Using `style.display` (Test Case 1):**
    * **Pro:** Generally considered more performant because it directly modifies the element's internal representation.
    * **Con:** Can be less readable if you have complex styles applied.
* **Using `setAttribute('style', ...)` (Test Case 2):**
    * **Pro:** More verbose, allowing you to set multiple styles at once and potentially making it more readable for complex scenarios.
    * **Con:** Potentially less performant than directly manipulating the `style` property due to extra DOM manipulation overhead.

**Other Considerations:**

*  The specific performance difference between these methods can vary depending on factors like browser, environment, and the complexity of the styles being applied.

Let me know if you have any other questions!

Related benchmarks:

style➜display VS setAttribute➜display (version: 0)

Comparing performance of: className vs setAttribute

Created: 7 years ago by: Guest

Jump to the latest result

className

setAttribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):