Web Worker 是否会在主线程上阻塞某些 OffscreenCanvas 函数？

Question

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

即使我运行正在使用 Web Worker，Web Worker 是否有可能阻止对 OffscreenCanvas 的某些使用？ convertToBlob 也会发生这种情况。

Answer 1

不应该。

但确实存在this issue引起的回归，影响Chrome > 82.

我打开了a bug report，现在只能等他们修好了

这是我制作的MCVE：

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>

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

Web Worker 是否会在主线程上阻塞某些 OffscreenCanvas 函数？

Does web worker block on the main thread for some OffscreenCanvas functions?

web-worker

不应该。