Benchmark: img.setAttribute vs img.src

HTML Preparation code:

<img id="img"/>

Tests:

setAttribute
img.setAttribute('src', 'https://blog-cloudflare-com-assets.storage.googleapis.com/2019/06/logo-cloudflare-dark-1.svg')
src
img.src = 'https://blog-cloudflare-com-assets.storage.googleapis.com/2019/06/logo-cloudflare-dark-1.svg'

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setAttribute
src

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Linux

View result in a separate tab

Test name	Executions per second
setAttribute	172747.9 Ops/sec
src	176951.4 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark provided tests the performance of two different methods for setting an image source in JavaScript: using `img.setAttribute` versus directly assigning a URL to the `img.src` property.

### Options Compared

1. **`img.setAttribute('src', 'image_url')`:**
   - This method uses the `setAttribute` function to set the value of the `src` attribute of the image element.
   - **Pros:**
     - Works for any attribute on HTML elements, not just `src`. This makes it flexible for other cases where attributes are dynamically set.
     - Maintains a consistent API for setting attributes, which can be helpful when dealing with elements generically.
   - **Cons:**
     - Marginally slower than direct property assignment due to the overhead of a function call and overhead of managing attributes.
     - It may not immediately trigger reflows and repaints as efficiently as direct property assignments.

2. **`img.src = 'image_url'`:**
   - This method directly assigns the URL to the `src` property of the image element.
   - **Pros:**
     - Faster performance compared to `setAttribute`, as evidenced by the benchmark results. The method operates more directly with JavaScript properties rather than going through the DOM attribute manipulation.
     - Likely to trigger updates in rendering and displays immediately.
   - **Cons:**
     - Limited only to the `src` property for images. If you have multiple attributes to set, this method becomes less versatile compared to `setAttribute`.

### Benchmark Results

In the latest benchmark results:
- The method using `img.src` achieved **176,951.40625 executions per second**.
- The method using `img.setAttribute` achieved **172,747.921875 executions per second**.

This indicates that using `img.src` is the more efficient approach in terms of execution speed.

### Other Considerations

- **Browser Compatibility**: Both methods are widely supported across modern browsers, but performance may vary depending on the browser and its version.
- **Use Case**: When dealing with multiple attributes, developers may prefer to use `setAttribute` for consistency. However, if performance is paramount and only the `src` attribute is being set, direct property assignment is recommended for better performance.

### Alternatives

- **Element Creation**: Instead of setting the source of an existing image, consider creating a new image element using `document.createElement('img')` and setting properties directly. This method can be more efficient in specific contexts if creating multiple images.
- **Preloading Images**: If dealing with many images, consider preloading them using a dedicated loading strategy before display, reducing the perceived loading times on the UI.
- **CSS Background Images**: Depending on the use case, you might also utilize CSS to handle images, which allows manipulation of images via CSS styles instead of manipulating HTML elements directly. This can sometimes simplify DOM operations.

Both methods being tested have their applications, and the choice of which to use should be dictated by the specific requirements of performance and versatility in the project.

Related benchmarks:

img.setAttribute vs img.src (version: 1)

Comparing performance of: setAttribute vs src

Created: one year ago by: Guest

Jump to the latest result

setAttribute

src

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):