Benchmark: Uint8Array vs Uint8ClampedArray 4 value copy ImageData 5

Script Preparation code:

var imageWidth = 50;
var imageHeight = 50;
var testElements = [];
var testImages = [];
for (let i = 0; i < 500; i++) {
  let element = document.createElement('canvas');
  element.width = imageWidth;
  element.height = imageHeight;
  element.style.width = imageWidth + 'px';
  element.style.height = imageHeight + 'px';
  testElements.push(element);
  var context = testElements[i].getContext("2d");
  testImages.push(context.getImageData(0, 0, imageWidth, imageHeight));
}

var imageData = new ImageData(imageWidth, imageHeight);

var weightNegativeThreshold = 0.04;
var weightPositiveThreshold = 0.96;
var pixelStride = 4;
var rowStride = imageWidth * pixelStride;
var pixelArrayLength = imageWidth * imageHeight * pixelStride;

Pseudo = {
    initialRandomSeed: 49734321,
    randomSeed: 49734321,

    resetRandomSeed: function()
    {
        Pseudo.randomSeed = Pseudo.initialRandomSeed;
    },

    random: function()
    {
        var randomSeed = Pseudo.randomSeed;
        randomSeed = ((randomSeed + 0x7ed55d16) + (randomSeed << 12))  & 0xffffffff;
        randomSeed = ((randomSeed ^ 0xc761c23c) ^ (randomSeed >>> 19)) & 0xffffffff;
        randomSeed = ((randomSeed + 0x165667b1) + (randomSeed << 5))   & 0xffffffff;
        randomSeed = ((randomSeed + 0xd3a2646c) ^ (randomSeed << 9))   & 0xffffffff;
        randomSeed = ((randomSeed + 0xfd7046c5) + (randomSeed << 3))   & 0xffffffff;
        randomSeed = ((randomSeed ^ 0xb55a4f09) ^ (randomSeed >>> 16)) & 0xffffffff;
        Pseudo.randomSeed = randomSeed;
        return (randomSeed & 0xfffffff) / 0x10000000;
    }
};

function _getRandomNeighboringPixelIndex(pixelIdx, pixelArrayLength)
{
  var xOffset = Math.floor((Pseudo.random() - weightNegativeThreshold) / (weightPositiveThreshold - weightNegativeThreshold));
  var yOffset = Math.floor((Pseudo.random() - weightNegativeThreshold) / (weightPositiveThreshold - weightNegativeThreshold));
  return (pixelIdx + pixelStride * xOffset + rowStride * yOffset) % pixelArrayLength;
}

Tests:

ImageData
for(let j = 0; j < 500; j++) { //var context = testElements[j].getContext("2d"); //var imageData = context.getImageData(0, 0, imageWidth, imageHeight); var imageData = testImages[i]; for(let i = 0; i < pixelArrayLength; i += pixelStride) { let neighborPixelIndex = _getRandomNeighboringPixelIndex(i, pixelArrayLength); imageData.data[i] = imageData.data[neighborPixelIndex]; imageData.data[i+1] = imageData.data[neighborPixelIndex+1]; imageData.data[i+2] = imageData.data[neighborPixelIndex+2]; imageData.data[i+3] = imageData.data[neighborPixelIndex+3]; } //context.putImageData(imageData, 0, 0); }
Uint8ClampedArray
{}

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Uint8ClampedArray

164.9M/s

ImageData

169/s

Fastest: Uint8ClampedArray (972942.8x faster)

View exact numbers

✓ Uint8ClampedArray: 164,875,776 ops/sec
• ImageData: 169 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ImageData
Uint8ClampedArray

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Uint8ClampedArray

169.4M/s

ImageData

1/s

View exact numbers

Test name	Executions per second
✓ Uint8ClampedArray	169,398,624 Ops/sec
ImageData	1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two approaches for manipulating image data in JavaScript:

1. `Uint8Array` (also known as plain old array)
2. `Uint8ClampedArray`

The test case is designed to simulate a scenario where you need to perform random assignments of pixel values between neighboring pixels in an image.

**What's being tested**

In the benchmark definition, two test cases are defined:

1. "ImageData" - This test case creates multiple images using `canvas` elements and retrieves their `ImageData` objects. Then, it assigns random values to neighboring pixels within each image data buffer.
2. "Uint8ClampedArray" - This is an empty test case, but it's likely a placeholder for comparing the performance of `Uint8ClampedArray` with another approach.

**Options compared**

In the benchmark definition, two options are being compared:

1. **`Uint8Array`**: An array-like object that can be used to represent binary data.
2. **`Uint8ClampedArray`**: A specialized array for holding unsigned 8-bit integers (0-255), with additional features like bounds checking and optimized memory layout.

**Pros and Cons**

* **`Uint8Array`**:
	+ Pros: Lightweight, simple to use, and widely supported.
	+ Cons: No bounds checking or optimization for image data manipulation.
* **`Uint8ClampedArray`**:
	+ Pros: Additional features like bounds checking, optimized memory layout, and better performance for image data manipulation.
	+ Cons: Slightly heavier than `Uint8Array`, requires special treatment to ensure proper memory alignment.

**Library usage**

In the benchmark definition, no specific library is used beyond what's built-in to JavaScript (e.g., `canvas`, `2D context`).

**Special JS features or syntax**

None are explicitly mentioned in this benchmark. However, some features like `Uint8Array` and `Uint8ClampedArray` may rely on underlying browser-specific optimizations.

**Other alternatives**

If you need additional libraries or approaches for image data manipulation, here are a few alternatives:

* **FFmpeg.js**: A JavaScript port of the popular FFmpeg library for video processing.
* **ImageMagick.js**: A JavaScript wrapper around ImageMagick's API for image processing tasks.
* **WebP**: An open-source image format that provides better compression and features than traditional JPEG and PNG.

Keep in mind that these alternatives might have different performance characteristics or require additional setup compared to `Uint8Array` and `Uint8ClampedArray`.

For this specific benchmark, the comparison between `Uint8Array` and `Uint8ClampedArray` is likely aimed at demonstrating the performance benefits of using a specialized array for image data manipulation.

Uint8Array vs Uint8ClampedArray 4 value copy ImageData 5 (version: 4)

Comparing performance of: `ImageData vs Uint8ClampedArray`

Created: 2 years ago by: Registered User

Go to the latest result

ImageData

Uint8ClampedArray

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Uint8Array vs Uint8ClampedArray 4 value copy ImageData 5 (version: 4)

Comparing performance of: ImageData vs Uint8ClampedArray

Created: 2 years ago by: Registered User

Go to the latest result

ImageData

Uint8ClampedArray

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `ImageData vs Uint8ClampedArray`