Benchmark: Setting the same value with setAttribute()

Setting the same value with setAttribute() (version: 6)

Is checking the current value of an attribute with getAttribute() better than setting the same value with setAttribute() over and over.

Comparing performance of: set the same value vs check and set nothing vs check and set a new value vs set a new value vs check cache and set nothing vs check cache and set a new value vs check and set the same value

Created: 2 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<svg version="1.1"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect id="rect1" width="100" height="100" fill="red" />
</svg>

Script Preparation code:

var rect = document.getElementById('rect1');
var width = Number(rect.getAttribute('width'));

Tests:

set the same value
rect.setAttribute('width', width);
check and set nothing
if (rect.getAttribute('width') !== `${width}`) { alert('this code does not run'); }
check and set a new value
if (rect.getAttribute('width') !== `${++width}`) { rect.setAttribute('width', width); }
set a new value
rect.setAttribute('width', ++width);
check cache and set nothing
const cache = width; if (cache !== width) { alert('this code does not run'); }
check cache and set a new value
const cache = width; if (cache !== ++width) { rect.setAttribute('width', width); }
check and set the same value
if (rect.getAttribute('width') === `${width}`) { rect.setAttribute('width', width); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
set the same value
check and set nothing
check and set a new value
set a new value
check cache and set nothing
check cache and set a new value
check and set the same value

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
set the same value	11957576.0 Ops/sec
check and set nothing	51463064.0 Ops/sec
check and set a new value	1991300.0 Ops/sec
set a new value	4642188.0 Ops/sec
check cache and set nothing	167591792.0 Ops/sec
check cache and set a new value	4640350.0 Ops/sec
check and set the same value	7037838.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested, the options compared, pros and cons of each approach, and other considerations.

**What is being tested?**

The provided benchmark measures the performance difference between various approaches to setting an attribute value on an HTML element. The focus is on comparing three types of operations:

1. **Setting the same value**: Repeatedly setting the `width` attribute with a fixed value using `setAttribute`.
2. **Checking and setting nothing**: Checking if the current value matches the new value, but not updating the attribute.
3. **Checking cache and setting nothing**: Storing the initial value in a variable (`cache`) and checking if it hasn't changed before updating the attribute.

Additionally, there are variations of these approaches:

4. **Setting a new value**: Directly incrementing the `width` variable and passing it to `setAttribute`.
5. **Checking cache and setting a new value**: Incrementing the `width` variable while keeping the initial value in `cache`, then checking if it hasn't changed before updating the attribute.
6. **Checking and setting a new value**: Updating the `width` variable on every iteration, but only when the current value is different from the stored cache.

**Options compared**

The benchmark compares six distinct approaches:

1. `setAttribute('width', width)`
2. `if (rect.getAttribute('width') !== `${width}`) { ... }`
3. `if (cache !== width) { ... }` with `const cache = width;`
4. `width++` and passing it to `setAttribute`
5. `if (cache !== ++width) { rect.setAttribute('width', width); }` with `const cache = width;`
6. `rect.setAttribute(width++)`

**Pros and cons of each approach**

Here's a brief summary:

1. **Setting the same value**: Fastest, as it doesn't involve any checks.
	* Pros: Simple, efficient
	* Cons: May not account for attribute caching or invalidation
2. **Checking and setting nothing**: Relatively fast, but still sets an attribute, even if the value hasn't changed.
	* Pros: Can be useful in certain scenarios where attribute validity is important
	* Cons: Doesn't optimize away unnecessary attribute updates
3. **Checking cache and setting nothing**: Similar to checking and setting nothing, but with a variable storing the initial value.
	* Pros: Can help avoid unnecessary checks and attribute updates
	* Cons: Requires extra memory allocation for the `cache` variable
4. **Setting a new value**: Efficiently sets an updated attribute value without any intermediate checks.
	* Pros: Simple, efficient
	* Cons: May not account for attribute caching or invalidation
5. **Checking cache and setting a new value**: Updates the `width` variable incrementally while checking if it has changed.
	* Pros: Can optimize away unnecessary updates when the value hasn't changed
	* Cons: Requires extra memory allocation for the `cache` variable
6. **Checking and setting a new value**: Similar to setting a new value, but only updates the attribute when the current value is different from the stored cache.
	* Pros: Simple, efficient
	* Cons: May not account for attribute caching or invalidation

**Other considerations**

* The benchmark doesn't consider issues like attribute caching or invalidation, which might affect performance in certain scenarios.
* Some approaches (e.g., checking and setting nothing) may not be suitable for all use cases where attribute updates are critical.

**Alternatives**

Some alternative approaches could include:

* Using a more efficient data structure, such as an array or linked list, to store the initial value instead of a variable (`cache`).
* Implementing a more advanced caching mechanism that takes into account attribute validity and invalidation.
* Using a different synchronization primitive, like atomic operations or locks, to ensure thread-safety.

Keep in mind that these alternatives would likely introduce additional complexity and may not be necessary for the specific use case being benchmarked.

Related benchmarks:

Setting the same value with setAttribute() (version: 6)

Is checking the current value of an attribute with getAttribute() better than setting the same value with setAttribute() over and over.

Comparing performance of: set the same value vs check and set nothing vs check and set a new value vs set a new value vs check cache and set nothing vs check cache and set a new value vs check and set the same value

Created: 2 years ago by: Registered User

Jump to the latest result

set the same value

check and set nothing

check and set a new value

set a new value

check cache and set nothing

check cache and set a new value

check and set the same value

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):