Benchmark: OffscreenCanvas vs HTMLCanvasElement drawImage() (w/ Transferables) (version: 1)

OffscreenCanvas vs HTMLCanvasElement drawImage() (w/ Transferables) (version: 1) (version: 0)

1. drawImage on the main thread 2. drawImage on a worker thread (passing messages as Strings) 3. drawImage on a worker thread (passing messages as ArrayBuffer(100)) 4. drawImage on a worker thread (Transferable messages as ArrayBuffer(100))

Comparing performance of: `drawImage on the main thread vs drawImage on a worker thread (passing messages as Strings) vs drawImage on a worker thread (passing messages as ArrayBuffer(100)) vs drawImage on a worker thread (Transferable messages as ArrayBuffer(100))`

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");
	buffer = ev.data.buffer;
  	self.postMessage({msg:'buffer',buffer: buffer, msgIndex:ev.data.msgIndex}, [buffer]);
  }
}
`]);

var myWorker = new Worker(window.URL.createObjectURL(blob));
var buff = new ArrayBuffer(100);
var buffers = [];

var poolSize = 30;

//create a pool of buffers
for (let i = 0; i < poolSize; 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)] = msg.data.buffer;
      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 on the main thread
if (img.width > 0){ ctx.drawImage(img, 0, 0); ctx.clearRect(0,0,640,480); }
drawImage on a worker thread (passing messages as Strings)
if (img.width > 0) myWorker.postMessage("255,0,0");
drawImage on a worker thread (passing messages as ArrayBuffer(100))
if (img.width > 0) myWorker.postMessage(buff);
drawImage on a worker thread (Transferable messages as ArrayBuffer(100))
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; i = buffers.length;} }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 on the main thread
drawImage on a worker thread (passing messages as Strings)
drawImage on a worker thread (passing messages as ArrayBuffer(100))
drawImage on a worker thread (Transferable messages as ArrayBuffer(100))

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Browser/OS: Chrome 134 on Windows

View result in a separate tab

drawImage on the main thread

1.8M/s

drawImage on a worker thread (passing messages as Strings)

1.3M/s

drawImage on a worker thread (passing messages as ArrayBuffer(100))

1.0M/s

drawImage on a worker thread (Transferable messages as ArrayBuffer(100))

248K/s

View exact numbers

Test name	Executions per second
✓ drawImage on the main thread	1,845,594 Ops/sec
drawImage on a worker thread (passing messages as Strings)	1,337,091 Ops/sec
drawImage on a worker thread (passing messages as ArrayBuffer(100))	1,012,159 Ops/sec
drawImage on a worker thread (Transferable messages as ArrayBuffer(100))	247,961 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 its test cases.

**Overview**

MeasureThat.net is a platform for comparing the performance of different approaches to JavaScript microbenchmarks. The benchmark in question compares the performance of `drawImage` on HTMLCanvasElement with three different approaches: drawing on the main thread, using a worker thread with messages as strings, using a worker thread with messages as ArrayBuffer(100), and using a worker thread with transferable messages as ArrayBuffer(100).

**Test Cases**

There are four test cases:

1. **drawImage on the main thread**
	* This test case draws an image on the main thread using `ctx.drawImage(img, 0, 0);`.
2. **drawImage on a worker thread (passing messages as Strings)**
	* This test case sends a message (`"255,0,0"` in this case) to a worker thread using `myWorker.postMessage("255,0,0");`. The worker thread then draws an image using `ctx.drawImage`.
3. **drawImage on a worker thread (passing messages as ArrayBuffer(100))**
	* This test case sends an ArrayBuffer object with size 100 bytes to a worker thread using `myWorker.postMessage(buff);`. The worker thread then draws an image using `ctx.drawImage` from the buffer.
4. **drawImage on a worker thread (Transferable messages as ArrayBuffer(100))**
	* This test case uses transferable ArrayBuffer objects to send data between the main thread and the worker thread. In this case, it sends an array of 100 elements to the worker thread using `myWorker.postMessage({msg:'buffer', msgIndex:i, buffer:buffers[i]},[buffers[i]]);`. The worker thread then draws an image from each element in the array.

**Approaches**

Each test case uses a different approach:

* **Main Thread**: Drawing on the main thread is the most straightforward approach. However, it can be limited by the CPU's single-threaded nature and may not take full advantage of multi-core processors.
* **Worker Thread with Strings**: Using a worker thread with messages as strings is an alternative to drawing on the main thread. However, sending string data over a network connection (even if it's just within the same process) can be slower than sending binary data.
* **Worker Thread with ArrayBuffer(100)**: Using a worker thread with an ArrayBuffer object of size 100 bytes is another approach. This allows for faster data transfer compared to using strings.
* **Worker Thread with Transferable messages**: Using transferable ArrayBuffer objects allows for even faster data transfer, as the data can be shared between threads without the need for explicit copying or concatenation.

**Benchmark Results**

The latest benchmark results show that:

* The main thread approach has the lowest execution rate (250426.59375 executions per second).
* The worker thread with strings approach has a lower execution rate than the main thread, but higher than the other two approaches.
* The worker thread with ArrayBuffer(100) approach has an even lower execution rate than the worker thread with strings, indicating that sending binary data is faster.
* The worker thread with transferable messages approach has the lowest execution rate of all four approaches.

**Conclusion**

In general, using a worker thread can improve performance compared to drawing on the main thread. However, the choice of approach depends on the specific use case and requirements. Sending binary data (e.g., using ArrayBuffer) is generally faster than sending string data. Using transferable ArrayBuffer objects can provide even better performance by allowing for shared memory between threads without explicit copying or concatenation.