Benchmark: setAttribute vs Object.assign

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>

Previous results

Test case name	Result
setAttribute
Object.assign
setAttributes

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0

Browser/OS: Chrome 132 on Windows

View result in a separate tab

Test name	Executions per second
setAttribute	952310.6 Ops/sec
Object.assign	690951.1 Ops/sec
setAttributes	453343.0 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 6 months ago):

LLMs can make mistakes. Check important info.

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:

setAttribute vs Object.assign (version: 3)

Comparing performance of: setAttribute vs Object.assign vs setAttributes

Created: 2 years ago by: Registered User

Jump to the latest result

setAttribute

Object.assign

setAttributes

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated 6 months ago):