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: 4 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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 4 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	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

postMessage vs drawImage (version: 0)

Created: 4 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