Benchmark: img src slowness

Script Preparation code:

function makeImage( src ) {
  var img = document.createElement( 'img' );
  img.className='nail';
  if ( src ) {
    img.src='data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
  }
  return img;
}

withSrc = makeImage( true );
withoutSrc = makeImage( false );

Tests:

Creation with src
makeImage( true );
Creation without src
makeImage( false );
Clone with src
withSrc.cloneNode();
Clone without src
withoutSrc.cloneNode();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Creation with src
Creation without src
Clone with src
Clone without src

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 days 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
Creation with src	215171.6 Ops/sec
Creation without src	3133547.5 Ops/sec
Clone with src	231034.5 Ops/sec
Clone without src	3863536.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Overview**

The test case, "img src slowness", creates image tags with/without an `src` attribute using JavaScript and measures their creation speed on various browsers. The test is primarily concerned with comparing the performance of creating an `img` element with or without a `src` attribute.

**Options Compared**

Two options are being compared:

1. **Creating an `img` element with a `src` attribute**: This option creates an `img` element and sets its `src` attribute to a data URI.
2. **Creating an `img` element without a `src` attribute**: This option creates an `img` element but does not set its `src` attribute.

**Pros and Cons of Each Approach**

* Creating an `img` element with a `src` attribute:
	+ Pros: Faster to create, as it only requires setting the `src` attribute.
	+ Cons: If the `data URI` is large or complex, this approach can be slower due to the overhead of encoding and decoding the data.
* Creating an `img` element without a `src` attribute:
	+ Pros: Easier to use and manage, as it doesn't require setting a potentially large `data URI`.
	+ Cons: Slower to create, as it requires creating an empty `img` element.

**Library and Special JS Feature**

The test case uses the `cloneNode()` method, which is a DOM method that creates a copy of an existing node in the document. This feature is part of the JavaScript standard library.

**Other Considerations**

* The test case also measures the performance of cloning the created `img` elements using `cloneNode()`. This can be useful to compare the performance of creating multiple identical nodes versus copying an existing node.
* The use of data URIs for the `src` attribute is a common technique for serving small, binary images (e.g., icons or thumbnails) without requiring additional HTTP requests.

**Alternatives**

If you wanted to create this benchmark with different approaches, here are some alternatives:

1. Use a library like jQuery or a custom implementation for creating and cloning `img` elements.
2. Compare the performance of using other DOM methods, such as `appendChild()` or `insertBefore()`, instead of `cloneNode()`.
3. Measure the performance of loading an image from a file system (e.g., using `URL.createObjectURL()`) versus using a data URI.

By testing these different approaches, you can gain insights into the optimal way to create and manipulate HTML elements in JavaScript, which can help improve the performance and usability of your applications.

Related benchmarks:

img src slowness (version: 1)

Creating image tags with/without an src attribute with a data URI.

Comparing performance of: Creation with src vs Creation without src vs Clone with src vs Clone without src

Created: 8 years ago by: Registered User

Jump to the latest result

Creation with src

Creation without src

Clone with src

Clone without src

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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