对于某些 OffscreenCanvas 功能，Web Worker 是否会在主线程上阻塞? [英] Does web worker block on the main thread for some OffscreenCanvas functions?

问题描述

我有一个网络工作者处理一组保存的 ImageData 帧，并且正在使用 OffscreenCanvas 的上下文(在网络工作者中创建)到 putImageData.同时在我的主线程中，我阻塞了另一个操作.如果我包含 context.putImageData() 调用，Web Worker 会阻塞，直到我的主线程完成后再继续，但是如果我删除 putImageData 调用或使用 context.clearRect() web worker 将与我的主线程同时运行.

即使我在网络工作者中运行，网络工作者是否有可能阻止 OffscreenCanvas 的某些用途?convertToBlob 也会发生这种情况.

解决方案

不应该.

但确实存在由这个问题导致的回归，这会影响 Chrome >82.

我确实打开了错误报告，所以现在我们所能做的就是等待他们修复它.

这是我制作的 MCVE:

const worker_script = `postMessage('准备好');//main 会阻塞const now = performance.now();const off = new OffscreenCanvas(300, 150);const off_ctx = off.getContext('2d');off_ctx.fillRect(0,0,30,30)postMessage(performance.now() - 现在);`;const worker_url = URL.createObjectURL( new Blob( [ worker_script ], { type: "text/javascript" } ) );const worker = new Worker(worker_url);worker.onmessage = evt =>{如果(evt.data ===准备好"){块主线程(3000).then(() => log('现在免费'));}else log(`worker 脚本花了 ${evt.data}ms 来完成.`);};worker.postMessage("");功能块MainThread(持续时间){返回新的承诺((解决)=> {const now = performance.now();while( performance.now() - now < duration ) {}解决();});}功能日志(内容){_log.textContent += 内容 + '\n';}

页面将被冻结 3 秒.请稍等.

鉴于该错误的性质，我怀疑是否有任何解决方法.

I have a web worker processing an array of saved ImageData frames and am using an OffscreenCanvas's context (created in the web worker) to putImageData. Meanwhile in my main thread I block on another operation. If I include the context.putImageData() call, the web worker blocks until my main thread completes before continuing, but if I remove the putImageData call or use context.clearRect() the web worker will run concurrently with my main thread.

Even if I'm running in a web worker, is it possible that the web worker blocks on some uses of OffscreenCanvas? This also happens with convertToBlob.

解决方案

It shouldn't.

But there is indeed a regression caused by this issue, which affects Chrome > 82.

I did open a bug report, so now all we can do is to wait for them to fix it.

Here is the MCVE I produced:

const worker_script = `
postMessage('ready'); // main will block
const now = performance.now();
const off = new OffscreenCanvas(300, 150);
const off_ctx = off.getContext('2d');
off_ctx.fillRect(0,0,30,30)
postMessage( performance.now() - now );
`;
const worker_url = URL.createObjectURL( new Blob( [ worker_script ], { type: "text/javascript" } ) );
const worker = new Worker( worker_url );

worker.onmessage = evt => {
  if (evt.data === "ready" ) {
    blockMainThread( 3000 )
      .then( () => log( 'now free' ) );
  }
  else log( `worker script took ${evt.data}ms to complete.` );
};

worker.postMessage( "" );

function blockMainThread( duration ) {
  return new Promise( ( resolve ) => {
    const now = performance.now();
    while( performance.now() - now < duration ) {}
    resolve();
  } );
}
function log( content ) {
  _log.textContent += content + '\n';
}

<pre id="_log">
The page will be frozen for 3s. Please wait.
</pre>

Given the nature of that bug, I doubt there is any way to workaround it.

这篇关于对于某些 OffscreenCanvas 功能，Web Worker 是否会在主线程上阻塞?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！