Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
setAttribute vs Object.assign
(version: 3)
Comparing performance of:
setAttribute vs Object.assign vs setAttributes
Created:
3 years ago
by:
Registered User
Jump to the latest result
Tests:
setAttribute
var input = document.createElement("input"); input.setAttribute("class", "my-class"); input.setAttribute("type", "checkbox");
Object.assign
const input = document.createElement("input"); Object.assign(input, {class: 'my-class', type: 'checkbox'});
setAttributes
function setAttributes(el, attrs) {Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]))} const input = document.createElement("input"); setAttributes(input, {class: 'my-class', type: 'checkbox'});
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
setAttribute
Object.assign
setAttributes
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
7 months ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Browser/OS:
Chrome 140 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
setAttribute
856245.1 Ops/sec
Object.assign
964526.1 Ops/sec
setAttributes
804644.1 Ops/sec
Autogenerated LLM Summary
(model
gemma2:9b
, generated one year ago):
This benchmark compares three different ways to set attributes on an HTML input element: **1. `setAttribute`:** This is the most direct method provided by JavaScript for setting attributes. It takes two arguments: the attribute name and its value. * **Pros:** Simple, widely understood. * **Cons:** Can be repetitive if you need to set many attributes. **2. `Object.assign`:** This method allows you to merge properties from one object into another. In this case, we create an object with the desired attributes (class and type) and use `Object.assign` to copy them onto the input element. * **Pros:** More concise for multiple attributes, can be more readable if dealing with complex objects. * **Cons:** Might be overkill for simple attribute setting. **3. `setAttributes` Function:** This demonstrates a custom function that iterates through an object of attributes and sets them individually using `setAttribute`. * **Pros:** Offers flexibility, can be easily reused for different elements. * **Cons:** Adds an extra layer of code complexity compared to the other methods. **Alternatives:** While these are the approaches tested in the benchmark, there are a few other options you could explore: * **Spread Syntax (`...`):** A modern syntax that can be used to efficiently spread properties from an object into another object or directly onto an element. This could offer a more concise alternative to `Object.assign`. The results of this benchmark show that, at least on Chrome 129 running on Windows, `setAttribute` and `Object.assign` perform very similarly. The custom function (`setAttributes`) is slightly slower in this case. Keep in mind that performance can vary depending on the browser, hardware, and specific context of your application. Always benchmark within your own environment to get the most accurate results.
Related benchmarks:
object.assign vs spread to create a copy
Object.assign() vs Reflect.set()
Object.setPrototypeOf vs Object literal
Dot property set notation VS Lodash.set (initial attribute existing 2)
Lodash.set VS property assign
Comments
Confirm delete:
Do you really want to delete benchmark?