Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
2 direct styles vs. setAttribute vs. classList
(version: 0)
Comparing performance of:
direct styles vs setAttribute vs classList
Created:
7 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="foo"></div>
Tests:
direct styles
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.style.postiion = "fixed"; element.style.bottom = "0"; }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", "bar"); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
direct styles
setAttribute
classList
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Benchmark Overview** The benchmark compares three different approaches to apply CSS styles to an HTML element: 1. Direct style assignment (`var element.style.postiion = "fixed";`) 2. Setting an attribute (`var element.setAttribute("class", "bar");`) 3. Using the `classList` API (`element.classList.add("bar");`) **Options Comparison** The three approaches are compared in terms of performance, specifically the number of executions per second. * **Direct style assignment**: This approach involves directly manipulating the `style` property of the element. While it's a straightforward way to apply styles, it can be slower due to the need to access and modify the element's CSS rules. * **Setting an attribute**: This approach uses the `setAttribute()` method to set a CSS class on the element. While it's widely supported, setting attributes can be slower than directly manipulating style properties. * **Using the `classList` API**: The `classList` API provides a more modern and efficient way to manage CSS classes on elements. It's generally faster than setting attributes or direct style assignment. **Pros and Cons** Here are some pros and cons of each approach: * Direct style assignment: + Pros: Simple and widely supported. + Cons: Can be slower due to the need to access and modify CSS rules. * Setting an attribute: + Pros: Widely supported, but can be slower than direct style assignment. + Cons: May lead to unnecessary attribute creation and maintenance. * Using the `classList` API: + Pros: Efficient, modern, and widely supported. + Cons: Requires a more modern browser to support. **Library/Functionality** None of the benchmark's test cases use any external libraries or functions beyond basic JavaScript. **Special JS Features/Syntax** The benchmark uses some special features of JavaScript, including: * **Template literals**: The `var element.style.postiion = "fixed";` line uses a template literal to construct a string. * **ES6+ syntax**: The benchmark uses modern ES6+ syntax, such as the `let` keyword and arrow functions, although these are not explicitly required by the benchmark. **Other Alternatives** Some alternative approaches that could be used in this benchmark include: * Using CSS classes with the `:nth-child()` pseudo-class or other CSS selectors. * Using JavaScript frameworks like React or Angular, which provide their own ways of managing styles and classes. * Implementing a custom style management system using JavaScript. Keep in mind that these alternatives would likely change the nature of the benchmark and may not be as relevant to the specific question being asked.
Related benchmarks:
className vs. setAttribute vs. classList
Native JS classList versus Native JS getAttribute
classList.add vs setAttribute
DataAttribute vs Class Selector on body
setAttribute vs classList.add
Comments
Confirm delete:
Do you really want to delete benchmark?