Can Web Workers utilize 100% of a multi-core CPU?

Question

I've been trying to find out just how capable web workers are of distributing processor load. I've yet to find any demos that seem to be able to get my quad core 2600k to even 50%, let alone 100%.

Here's a web worker demo I've tried to max my CPU on:

http://nerget.com/rayjs-mt/rayjs.html

(If you go into the page's HTML with firebug /chrome-inspect-element and make the canvas larger, you can make it raytrace a much larger image - I set mine to 1920 x 1080)

Even with 4, 8, 16 workers selected, I can't get my CPU utilization above around 25% per core.

Does anyone know if you can utilize 100% of the CPU through web workers?

(I'm using Google Chrome.)

Alvertaalves

Other than curiosity why would you want to use up 100% of your browser's cpu? what about the other apps (/browser tabs) that the user has running? do they not deserve some cpu love? – Quantum

I would never plan to actually steal 100% of the CPU, but I want to know that I have the capability of fully utilizing the available hardware (this is for a game). I probably never will use 100% of every core, but I don't want to be limited to a small amount of each core's power. Apparently, as demonstrated by Esailija, web workers can utilize 100%, so problem solved. – Alvertaalves

The raytracer completes in 0.4 seconds for me when using 4 workers so maybe it's too quick to show up? The while loops took several seconds before using 100% – Phonology

@Phonology yes, that raytracer's default image size is too small to see your processor peak out, you have to go into the page's HTML and set the canvas width and height to something much much larger in order to get enough processing time to see it max out. – Alvertaalves

I'm not sure if you guys could clarify this for me, but does creating a web worker automatically use a free cpu core? Or is it just another thread on the same core? – Dodeca

It will use available cores if necessary. This can be seen with examples such as Esailija's below where 100% of your CPU can be used. I'm not exactly sure what happens if the web workers you create don't require much CPU time and can all be executed on the same hardware thread. You could try to write some benchmarks to see if things execute more quickly using a web worker even if the computational load is light. – Alvertaalves

Answer 1

This uses 100% on my 2500K:

var code = "while(true){}";
var URL = window.webkitURL || window.URL;
var bb = new Blob([code], {type : 'text/javascript'});

code = URL.createObjectURL(bb);

new Worker(code);
new Worker(code);
new Worker(code);
new Worker(code);

http://jsfiddle.net/MTJ27/81/

Phonology

Yep, I updated your code to run 8 workers instead of 4 because I have hyper-threading enabled, and sure enough 100% usage. Thank you for enlightening me – Alvertaalves

@JonathonG oh actually I have 2500K (no hyper-threading support :() so 4 was enough for me :D – Phonology

Answer 2

I have re-written Esailija's answer using the new blob constructor. BlobBuilder is now outdated, so you must use Blob() instead, see here for the deets: http://updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-Them

window.URL = window.URL || window.webkitURL;

var blob = new Blob(["while(true){}"], {type: 'text/javascript'});

code = window.URL.createObjectURL(blob);

new Worker(code);
new Worker(code);
new Worker(code);
new Worker(code);

http://jsfiddle.net/MTJ27/15/

Evite

Thanks for looking into this even after so long. – Alvertaalves

I just checked your jsfiddle, and this definitely gets the job done! – Alvertaalves

Answer 3

CPU only can be utilised 100% when we know the PC core, To find out CPU core of your PC open the dev tools and type navigator.hardwareConcurrency that will you the logical cores then you will use the cores number of workers == cores then you will be able to use 100% of CPU For example if I have 16 cores so I will create the 16 web workers

Tracey