Benchmark: img src test - MeasureThat.net

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();
clone without src then set src
const cloned = withoutSrc.cloneNode(); cloned.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='

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
clone without src then set src

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:80.0) Gecko/20100101 Firefox/80.0

Browser/OS: Firefox 80 on Windows

View result in a separate tab

Test name	Executions per second
creation with src	49878.7 Ops/sec
creation without src	855427.1 Ops/sec
clone with src	49773.0 Ops/sec
clone without src	1308649.9 Ops/sec
clone without src then set src	53333.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

MeasureThat.net is a website where users can create and run JavaScript microbenchmarks to compare the performance of different approaches. The provided benchmark measures the performance of creating and cloning `img` elements in Firefox 80.

**Script Preparation Code Analysis**

The script preparation code defines a function `makeImage(src)` that creates an `img` element with the specified source URL. If `src` is truthy, it sets the `src` attribute of the `img` element to a base64-encoded GIF image. The function returns the created `img` element.

There are two variants of this function:

* `makeImage(true)` creates an `img` element with a non-empty source URL.
* `makeImage(false)` creates an empty `img` element without a source URL.

**Options Comparison**

The benchmark compares the performance of three approaches:

1. **Creating an image with a source URL (`create with src`)**: This approach involves calling `makeImage(true)`.
2. **Creating an image without a source URL (`creation without src`)**: This approach involves calling `makeImage(false)`.
3. **Cloning an image and then setting the source URL (`clone without src then set src`)**: This approach involves cloning the result of `makeImage(false)` using the `cloneNode()` method, and then setting the `src` attribute to a base64-encoded GIF image.

**Pros and Cons of Each Approach**

1. **Creating an image with a source URL**:
	* Pros: May be faster due to reduced overhead of cloning.
	* Cons: Requires a non-empty source URL, which may not always be available.
2. **Creating an image without a source URL**:
	* Pros: Faster and more efficient, as it avoids the overhead of setting the `src` attribute.
	* Cons: Creates an empty `img` element, which may not be desirable in some cases.
3. **Cloning an image and then setting the source URL**:
	* Pros: Allows for more flexibility, as the cloned image can be used without modifying its attributes.
	* Cons: Slower due to cloning and then modifying the image.

**Library and Special JS Features**

The benchmark uses the `cloneNode()` method, which is a built-in JavaScript method that creates a deep copy of an element.

No special JS features or syntax are used in this benchmark.

**Other Alternatives**

If you wanted to modify the benchmark to compare other approaches, here are some alternatives:

* Compare the performance of using different image formats (e.g., JPEG, PNG) instead of GIF.
* Measure the performance of creating and cloning `img` elements in different browsers or versions.
* Add more complex scenarios, such as creating multiple images with different source URLs and then combining them into a single image.

These modifications would require additional script preparation code, test case definitions, and benchmark analysis.

Related benchmarks:

img src test (version: 0)

Comparing performance of: creation with src vs creation without src vs clone with src vs clone without src vs clone without src then set src

Created: 4 years ago by: Guest

Jump to the latest result

creation with src

creation without src

clone with src

clone without src

clone without src then set src

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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