Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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:
5 years ago
by:
Guest
Jump to the latest result
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>
Run tests (5)
Previous results
Fork
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:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**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 slowness
HTMLCanvasElement and OffscreenCanvas drawImage performance for HTMLImageElement, HTMLCanvasElement, OffscreenCanvas and ImageBitmap
replaceWith vs innerHTML
createImageBitmap using Blob vs image element
Comments
Confirm delete:
Do you really want to delete benchmark?