时间戳

首页 > 解决方案 > 对于某些 OffscreenCanvas 功能，Web Worker 是否会在主线程上阻塞？

web-worker - 对于某些 OffscreenCanvas 功能，Web Worker 是否会在主线程上阻塞？

问题描述

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

即使我在网络工作者中运行，网络工作者是否有可能阻止某些使用OffscreenCanvas？这也发生在convertToBlob.

标签： web-worker

解决方案

它不应该。

但是确实有这个问题导致的回归，影响 Chrome > 82。

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

这是我制作的 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>

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

推荐阅读