Benchmark: Object.assign vs element.style.*

HTML Preparation code:

<div id="el">
  <h2>Lorem ipsum dolor sit amet</h2>
</div>

Script Preparation code:

var el = document.getElementById("el");

Tests:

Object.assign
Object.assign(el.style, { top: "3px", height: "10px", left: "50px", transition: "left 0.5s ease", });
style.*
el.style.top= "3px"; el.style.height="10px"; el.style.left= "50px"; el.style.transition= "left 0.5s ease";

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Object.assign

334K/s

style.*

303K/s

Fastest: Object.assign (1.1x faster)

View exact numbers

✓ Object.assign: 333,719 ops/sec
• style.*: 303,326 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
style.*

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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

Browser/OS: Chrome 132 on Windows

View result in a separate tab

Object.assign

1.2M/s

style.*

1.2M/s

View exact numbers

Test name	Executions per second
✓ Object.assign	1,237,379 Ops/sec
style.*	1,200,678 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The website allows users to create and run JavaScript microbenchmarks, which means we're comparing different approaches to achieve the same result in terms of performance.

In this case, the benchmark is testing two ways to set CSS styles on an HTML element:

1. **Object.assign**: Using the `Object.assign()` method to merge an object with the existing style properties.
2. **style.***: Directly accessing and setting individual style properties (e.g., `el.style.top`, `el.style.height`, etc.).

**Options Compared**

We have two main options being compared:

1. **Object.assign**: This approach uses a single method call to merge an object with the existing style properties.
2. **style.***: This approach directly accesses and sets individual style properties.

**Pros and Cons**

* **Object.assign**:
	+ Pros: Can be more efficient when dealing with large numbers of styles, as it avoids the overhead of separate property accesses.
	+ Cons: May incur additional overhead due to the method call and object creation.
* **style.***: 
	+ Pros: Simple and direct, can be faster for a small number of properties.
	+ Cons: May be slower when dealing with a large number of styles due to individual property accesses.

**Library and Special JS Features**

In this benchmark, there is no specific library being used. However, it's worth noting that the use of `Object.assign()` is a common pattern in modern JavaScript development.

No special JavaScript features or syntax are mentioned in this benchmark.

**Other Considerations**

When dealing with style properties, consider the following:

* Browser-specific quirks: Different browsers may have varying behavior when it comes to CSS properties and their order.
* Cache and memory impact: The approach used can affect cache usage and memory allocation.
* Code readability and maintainability: Choosing a consistent approach to setting styles can improve code clarity.

**Alternatives**

Other approaches to set CSS styles include:

1. Using the `setStyle()` method (if available) for modern browsers like Chrome and Safari.
2. Using a library or framework that provides a convenient way to set styles, such as React's `styles` API.
3. Using a CSS-in-JS solution like styled-components.

Keep in mind that these alternatives might have different performance characteristics compared to the approaches tested here.

Object.assign vs element.style.* (version: 0)

Comparing performance of: `Object.assign vs style.*`

Created: one year ago by: Guest

Go to the latest result

Object.assign

style.*

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Object.assign vs element.style.* (version: 0)

Comparing performance of: Object.assign vs style.*

Created: one year ago by: Guest

Go to the latest result

Object.assign

style.*

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `Object.assign vs style.*`