Benchmark: postMessage vs drawImage

postMessage vs drawImage (version: 0)

This is a fabulous little experiment that compares postMessage with drawImage. It is the closest benchmark one could use to compare drawImage on a single thread, vs. drawImage on a worker using OffscreenCanvas assuming that the instructions of what to draw to OffscreenCanvas was passed through postMessage as in instruction

Comparing performance of: postMessage 1 string arg vs postMessage 2 string arr vs postMessage 3 string arr vs postMessage 4 string arr vs no postMessage no arguments vs postMessage Number vs drawImage vs postImage Numbers ([id, x, y, angle, scale_x, scale_y, alpha]) vs postImage Numbers (String(id, x, y, angle, scale_x, scale_y, alpha))

Created: 5 years ago by: Guest

Jump to the latest result

Script Preparation code:

var blob = new Blob([
    "var i = 0; while(true) i++;"]);

var myWorker = new Worker(window.URL.createObjectURL(blob));

var canvas =  document.createElement("canvas");
canvas.width = 640;
canvas.height = 480;
var ctx = canvas.getContext('2d');

var img = new Image();
img.src = "https://www.google.com/s2/favicons?domain=www.google.com";

Tests:

postMessage 1 string arg
myWorker.postMessage("string1"); i++;
postMessage 2 string arr
myWorker.postMessage(["string1", "string2"]); i++;
postMessage 3 string arr
myWorker.postMessage(["string1", "string2", "string3"]); i++;
postMessage 4 string arr
myWorker.postMessage(["string1", "string2", "string3", "string4"]); i++;
no postMessage no arguments
i++;
postMessage Number
myWorker.postMessage(9001); i++;
drawImage
ctx.drawImage(img, 0,0);
postImage Numbers ([id, x, y, angle, scale_x, scale_y, alpha])
myWorker.postMessage([9001, 9001, 9001, 9001, 9001, 9001, 9001]); i++;
postImage Numbers (String(id, x, y, angle, scale_x, scale_y, alpha))
myWorker.postMessage("9001, 9001, 9001, 9001, 9001, 9001, 9001"); i++;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
postMessage 1 string arg
postMessage 2 string arr
postMessage 3 string arr
postMessage 4 string arr
no postMessage no arguments
postMessage Number
drawImage
postImage Numbers ([id, x, y, angle, scale_x, scale_y, alpha])
postImage Numbers (String(id, x, y, angle, scale_x, scale_y, alpha))

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what is being tested.

**Benchmark Overview**

The test compares two approaches: `postMessage` with different types of arguments (strings, arrays) versus drawing on an image using `drawImage`. The goal is to determine which approach is faster for each scenario.

**What is being tested?**

1. **String arguments**: Four tests are run with a single string argument (`"string1"`, `"string2"`, `"string3"`, and `"string4"`). These tests measure the performance of sending a single string through `postMessage`.
2. **Array arguments**: Two tests are run with an array of strings (`[ "string1", "string2", ... ]`). One test sends an entire array, while another sends a string representation of an array (e.g., `"9001, 9001, 9001, 9001, 9001, 9001, 9001"`).
3. **Drawing on an image**: Two tests are run with `drawImage`, which draws a single image.

**Performance Results**

The results show that the execution times for each test vary depending on the type of argument sent through `postMessage`. In general:

* Sending individual strings is faster than sending arrays.
* Sending string representations of arrays (e.g., `"9001, 9001, 9001, 9001, 9001, 9001, 9001"`) is slower than sending the actual array.

**DrawImage performance**

The `drawImage` tests show that drawing on an image using `drawImage` is relatively fast, with execution times ranging from around 6-10 milliseconds.

**Interpretation and Limitations**

While these results provide some insights into the performance differences between `postMessage` and `drawImage`, there are several limitations to consider:

* The test scenarios may not be representative of real-world use cases.
* The execution times may vary depending on factors like system resources, graphics card capabilities, and other variables.
* Other optimization techniques or workarounds might affect the results.

To gain a deeper understanding of the performance characteristics of `postMessage` and `drawImage`, additional testing and analysis would be necessary.

Latest run results:

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

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

Browser/OS: Chrome 73 on Windows 8.1

View result in a separate tab

Test name	Executions per second
postMessage 1 string arg	158119.4 Ops/sec
postMessage 2 string arr	56471.8 Ops/sec
postMessage 3 string arr	22364.5 Ops/sec
postMessage 4 string arr	9043.6 Ops/sec
no postMessage no arguments	50127968.0 Ops/sec
postMessage Number	49743.3 Ops/sec
drawImage	6996.6 Ops/sec
postImage Numbers ([id, x, y, angle, scale_x, scale_y, alpha])	15609.1 Ops/sec
postImage Numbers (String(id, x, y, angle, scale_x, scale_y, alpha))	43249.6 Ops/sec

Related benchmarks:

postMessage vs drawImage (version: 0)

Created: 5 years ago by: Guest

Jump to the latest result

postMessage 1 string arg

postMessage 2 string arr

postMessage 3 string arr

postMessage 4 string arr

no postMessage no arguments

postMessage Number

drawImage

postImage Numbers ([id, x, y, angle, scale_x, scale_y, alpha])

postImage Numbers (String(id, x, y, angle, scale_x, scale_y, alpha))

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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