That was a bug in Chromium, which got fixed by this commit (available in Chrome v83).
The message from this commit:
Don't schedule idle tasks for workers
Idle tasks take much longer on worker threads because
requestAnimationFrame isn't there. For this test:
https://chromium-review.googlesource.com/c/chromium/src/+/2124971
Without this change worker convertToBlob takes ~400ms
With this change worker convertToBlob takes ~10ms
And if interested, the code I used to find the correct bisect range:
if( !window.OffscreenCanvasRenderingContext2D ) {
throw new Error( "Your browser doesn't support the 2D context of the Offscreen canvas" );
}
// This code demonstrate how calling 100 times convertToBlob
// doesn't end up in 100 x single-time execution
// i.e the actual processing time is much less than the time we have to wait...
const script = `
onmessage= async (e) => {
const offscreen = new OffscreenCanvas( 800, 600 );
const ctx = offscreen.getContext( '2d' );
const bitmap = await fetch( 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png' )
.then( (resp) => resp.blob() )
.then( createImageBitmap );
{
const beginning = performance.now();
const proms = [];
for( let i = 0; i < 10; i++ ) {
ctx.drawImage( bitmap, i, i );
ctx.clearRect( 0, 0, 100, 100 );
ctx.fillText( i , 50, 50 );
const start = performance.now();
proms.push( offscreen.convertToBlob()
.then( blob => {
const now = performance.now();
postMessage( '('+ i + ') in sync loop' + ' - took:' + (now - start)
);
} )
);
}
const blobs = await Promise.all( proms );
const duration = performance.now() - beginning;
postMessage( 'all done in ' + duration + ' -> ' + Math.round( duration / 10 ) + 'ms in average' );
}
{
const beginning = performance.now();
const proms = [];
for( let i = 0; i < 10; i++) {
ctx.drawImage( bitmap, i, i );
ctx.clearRect( 0, 0, 100, 100 );
ctx.fillText( i , 50, 50 );
const start = performance.now();
proms.push( offscreen.convertToBlob()
.then( blob => {
const now = performance.now();
postMessage( '('+ i + ') in rAF loop took - ' + (now - start) );
} )
);
await new Promise(res => requestAnimationFrame(res));
}
const blobs = await Promise.all( proms );
const duration = performance.now() - beginning;
postMessage( 'all done in ' + duration + ' -> ' + Math.round( duration / 10 ) + 'ms in average' );
}
{
let duration = 0;
const proms = [];
for( let i = 0; i < 10; i++) {
const beginning = performance.now();
ctx.drawImage( bitmap, i, i );
ctx.clearRect( 0, 0, 100, 100 );
ctx.fillText( i , 50, 50 );
const start = performance.now();
proms.push( offscreen.convertToBlob()
.then( blob => {
const now = performance.now();
duration += now - start;
postMessage( '('+ i + ') in timeout loop took - ' + (now - start) );
} )
);
await wait( 500 );
}
const blobs = await Promise.all( proms );
postMessage( 'all done in ' + duration + ' -> ' + Math.round( duration / 10 ) + 'ms in average' );
}
};
function wait(ms) { return new Promise( (res) => setTimeout( res, ms ) ); }
`;
const blob = new Blob( [ script ] );
const worker = new Worker( URL.createObjectURL( blob ) );
worker.onmessage = (e) => console.log( e.data );
worker.postMessage("");
From this test, in Chrome < 83 I get approximately 200ms on average for the two first tests (sync and requestAnimationFrame), and 900ms (oO) with the setTimeout test.
These tests allowed me to understand that it's actually not only "slow", but that there is a huge delay added before every step, where nothing happens.
With the latest Canary version, all these tests return 30ms on average.
So there is unfortunately not much you can do,
apart from working from Canary and wait until Chrome releases the v83 on branch before you release your code publicly... But still note that batching several calls will only have some delay, it won't take incremental time to process.
Now, since OP wants to convert an ImageBitmap to a Blob in a Worker, this won't help, but an ugly workaround for other readers is to make that conversion in the main thread, either by first converting the canvas to an ImageBitmap (convertToImageBitmap()
is fast enough) and then sending back this ImageBitmap to the main thread, either by using a detached HTMLCanvasElement and calling its toBlob
method.
if( !window.OffscreenCanvasRenderingContext2D ) {
throw new Error( "Your browser doesn't support the 2D context of the Offscreen canvas" );
}
const script = `
onmessage= async (e) => {
const offscreen = e.data;
const ctx = offscreen.getContext( '2d' );
const bitmap = await fetch( 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png' )
.then( (resp) => resp.blob() )
.then( createImageBitmap );
// probably do something else here...
ctx.drawImage( bitmap, 0, 0 );
const start = Date.now(); // start measuring from now
postMessage( start );
};
`;
const blob = new Blob( [ script ] );
const worker = new Worker( URL.createObjectURL( blob ) );
const canvas = document.getElementById( 'canvas' );
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage( offscreen, [ offscreen ] );
worker.onmessage = (e) => {
const start = e.data;
canvas.toBlob( (blob) => {
console.log( 'Transfer to Blob took', Date.now() - start + 'ms' );
} );
};
<canvas id="canvas" width="800" height="600"></canvas>
clientInformation.hardwareConcurrency
More workers than that can result in slower overall performance. Chrome open task manager to make sure you have free processing time. Open task manager on device OS to make sure you have the resources.