Benchmark: OffscreenCanvas vs HTMLCanvasElement drawImage() (w/ Transferable)

OffscreenCanvas vs HTMLCanvasElement drawImage() (w/ Transferable) (version: 0)

Comparing OffscreenCanvas vs HTMLCanvasElement, and investigating the usage of multiple postMessage strategies, from structured cloning of objects to transferable ArrayBuffers.

Comparing performance of: `drawImage Main Thread vs drawImage Worker Thread, String vs drawImage Worker Thread, ArrayBuffer StructuredClone vs drawImage Worker Thread, ArrayBuffer Transferable`

Created: 7 years ago by: Guest

Go to the latest result

Script Preparation code:


var blob = new Blob([
    `  
  let bitmap = undefined;
  let canvas = undefined;
  let ctx    = undefined;
  let buffer = undefined;

let postAMessage=self.postMessage;

function render()
{
		ctx.clearRect(0,0,640,480);
		ctx.drawImage(bitmap, 0,0);
		requestAnimationFrame(render);
}

self.onmessage = function(ev) {



  if(ev.data.msg === 'bitmap' && canvas != undefined) {
		bitmap = ev.data.imageB;
		console.log("Received an ImageBitmap next!");
		render();
  }

  if(ev.data.msg === 'init' && bitmap != undefined) {
    canvas = ev.data.canvas;
    ctx = canvas.getContext('2d');
	console.log("Received a canvas next!");
	render();

  }

  if(ev.data.msg === 'bitmap' && canvas == undefined) {
	console.log("Received a bitmap first!");
	
		bitmap = ev.data.imageB;
  }

  if(ev.data.msg === 'init' && bitmap == undefined) {
	console.log("Received a canvas first!");
	
    canvas = ev.data.canvas;
    ctx = canvas.getContext('2d');

  }
  if(ev.data.msg === 'buffer') {
	console.log("Clearing buffer " + ev.data.msgIndex + "from pool");

  	self.postMessage({msg:'buffer',msgIndex:ev.data.msgIndex});
  }
}
`]);

var myWorker = new Worker(window.URL.createObjectURL(blob));
var buff = new ArrayBuffer(8);
var buffers = [];

//create a pool of buffers
for (let i = 0; i < 30; i++)
{
buffers.push(new ArrayBuffer(100));
buffers[i].isUsed = false;
}

var img = new Image();

function handleMessageFromWorker(msg) {
    console.log('the thread used buffer: ' + msg.data.msgIndex);
	if (msg.data.msg == "buffer")
    {
      buffers[parseInt(msg.data.msgIndex)] = new ArrayBuffer(100);
      buffers[parseInt(msg.data.msgIndex)].isUsed = false;
    }
}

myWorker.addEventListener('message', handleMessageFromWorker);

img.src = "https://www.google.com/s2/favicons?domain=www.google.com";

img.decode().then(() => {createImageBitmap(img).then(Ibitmap => { myWorker.postMessage({imageB: Ibitmap, msg:'bitmap'}, [Ibitmap]);  })});

var canvas =  document.createElement("canvas");
var c2 =  document.createElement("canvas");
c2.width = 640;
c2.height = 480;
c2 = c2.transferControlToOffscreen();

canvas.width = 640;
canvas.height = 480;
c2.width = 640;
c2.height = 480;

var ctx = canvas.getContext('2d');

myWorker.postMessage({msg: 'init', canvas: c2}, [c2]);

Tests:

drawImage Main Thread
if (img.width > 0){ ctx.drawImage(img, 0, 0); ctx.clearRect(0,0,640,480); }
drawImage Worker Thread, String
if (img.width > 0) myWorker.postMessage("255,0,0");
drawImage Worker Thread, ArrayBuffer StructuredClone
if (img.width > 0) myWorker.postMessage(buff);
drawImage Worker Thread, ArrayBuffer Transferable
if (img.width > 0) { let buffersFull = true; for (let i = 0; i < buffers.length; i++) { if (!buffers[i].isUsed) {myWorker.postMessage({msg:'buffer', msgIndex:i, buffer:buffers[i]},[buffers[i]]); buffers[i].isUsed = true; buffersFull = false;} }if (buffersFull) console.log("All buffers in the pool are full")}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
drawImage Main Thread
drawImage Worker Thread, String
drawImage Worker Thread, ArrayBuffer StructuredClone
drawImage Worker Thread, ArrayBuffer Transferable

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

drawImage Worker Thread, String

1.4M/s

drawImage Main Thread

1.2M/s

drawImage Worker Thread, ArrayBuffer StructuredClone

1.0M/s

drawImage Worker Thread, ArrayBuffer Transferable

109K/s

View exact numbers

Test name	Executions per second
✓ drawImage Worker Thread, String	1,394,307 Ops/sec
drawImage Main Thread	1,165,616 Ops/sec
drawImage Worker Thread, ArrayBuffer StructuredClone	1,044,344 Ops/sec
drawImage Worker Thread, ArrayBuffer Transferable	109,183 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches for drawing images on web workers is crucial for optimizing website performance.

**Overview**

The provided benchmark test compares three approaches:

1. Drawing an image directly on the main thread's `ctx` using `drawImage()`.
2. Sending a string representing an RGB value to the worker thread and expecting it to draw the image.
3. Sending an array buffer created from structured cloning of an image to the worker thread.

**Options Compared**

The three test cases compare the performance of drawing images on different threads, specifically:

* **Main Thread**: Drawing the image directly on the `ctx` using `drawImage()`. This is the traditional approach and might not be optimal for web workers.
* **Worker Thread (String)**: Sending a string representing an RGB value to the worker thread. The worker thread expects this string to draw the image, which implies that it will interpret the string as a pixel data format.
* **Worker Thread (ArrayBuffer StructuredClone)**: Sending an array buffer created from structured cloning of an image to the worker thread. This approach utilizes the `structuredClone()` method to create a new array buffer containing a copy of the original image.

**Pros and Cons**

1. **Main Thread**: The traditional approach is simple, but it might not be optimized for web workers.
	* Pros: Easy to implement, doesn't require creating an array buffer or sending data to the worker thread.
	* Cons: May not take advantage of parallel processing, as the work is done on the main thread.
2. **Worker Thread (String)**:
	* Pros: Doesn't require creating an array buffer or sending complex data to the worker thread.
	* Cons: Requires a custom string representation of pixel data and may not be optimized for performance.
3. **Worker Thread (ArrayBuffer StructuredClone)**:
	* Pros: Utilizes parallel processing by sending data to the worker thread, which can improve performance.
	* Cons: Requires creating an array buffer using `structuredClone()`, which might add overhead.

**Performance Results**

The latest benchmark results show that:

1. **Main Thread**: Drawing on the main thread is the slowest approach (280,584 executions per second).
2. **Worker Thread (ArrayBuffer StructuredClone)**: Sending an array buffer created from structured cloning of an image to the worker thread is the fastest approach (608,051 executions per second).

Overall, using a worker thread with `structuredClone()` can significantly improve performance when drawing images on web workers.

**Best Practices**

To optimize web worker performance:

1. Utilize parallel processing by sending complex data or computations to worker threads.
2. Leverage the power of structured cloning for efficient data transfer.
3. Consider implementing custom string representations for pixel data if needed, but keep in mind potential limitations and overheads.

I hope this explanation helps you understand the benchmark test results!