Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
style➜display VS setAttribute➜display
(version: 0)
Comparing performance of:
className vs setAttribute
Created:
8 years ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=508091" width="100%" height="500px"></iframe>
setAttribute
3K/s
className
1K/s
View exact numbers
Test name
Executions per second
✓
setAttribute
2,969 Ops/sec
className
1,451 Ops/sec
Autogenerated LLM Summary
(model
llama3.1:latest
, generated one year ago):
Let's dive into the explanation. **Benchmark Overview** The benchmark measures the performance difference between two ways of setting the `display` property of an HTML element: using the `style.display` approach versus the `setAttribute('style', ...)`, where we set the entire CSS style string at once. **Test Case 1: `className` (using `style.display`)** * The test case uses a simple loop to iterate from 1000 down to 0. * In each iteration, it sets the `display` property of an HTML element (`#foo`) using the dot notation (`element.style.display = "none";`). * This approach is concise and direct, leveraging the built-in DOM API. **Test Case 2: `setAttribute` (using `setAttribute('style', ...)`)** * The test case also uses a loop to iterate from 1000 down to 0. * In each iteration, it sets the entire CSS style string using `setAttribute('style', 'display:none');`. * This approach is more verbose and indirect, relying on the element's attribute API. **Benchmark Results** The latest results show that: * The `setAttribute` approach (test case 2) runs at approximately **1451 executions per second**. * The `className` approach (test case 1) runs at approximately **2968 executions per second**, which is about **2x faster** than the `setAttribute` method. **Pros and Cons** * **`style.display` approach**: + Pros: concise, direct, and fast (~3000 EPS). + Cons: limited to individual properties (display, width, height, etc.); cannot set multiple styles at once. * **`setAttribute('style', ...)`) approach**: + Pros: can set entire CSS style string with a single call; allows setting multiple styles simultaneously. + Cons: more verbose and slower (~1450 EPS) compared to the direct `style.display` method. **Considerations** When choosing between these approaches, consider: * **Readability**: If you're working on a codebase that prioritizes readability, using the `className` approach (direct and concise) might be preferable. * **Performance**: For high-performance scenarios or when setting multiple styles simultaneously, the `setAttribute('style', ...)`) approach might be a better choice. **Alternatives** If performance is not a concern, you can also consider other approaches: * Using CSS classes: Set the desired styles using a CSS class and add/ remove it from the element as needed. * Leveraging JavaScript libraries or frameworks (e.g., React, Angular) that provide their own rendering and style management APIs.
Related benchmarks
jquery - empty vs html
jquery html text vs text
Comments
Confirm delete:
Do you really want to delete benchmark?