Run results for: postMessage vs drawImage

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

Run details:

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: Chrome 73

Operating system: Windows 8.1

Device Platform: Desktop

Date tested: 5 years ago

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	50127970.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

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++;

Run results for: postMessage vs drawImage

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))