为什么从 Canvas 切换到 OffScreenCanvas 会提高 drawImage 和 getImageData 的性能？

Question

我正在从网络摄像头的实时媒体流中运行一个实时进程，这要求 FPS 保持在 30FPS 左右。 getImageData 是我的主要瓶颈之一，从画布中提取ImageData对象需要大约 22 毫秒，而我只需要 11 毫秒来完成其他操作。

这是我之前的一个简单片段

  video = document.createElement("video");
  inputCanvas = document.createElement("canvas");
  inputCanvas.width = width;
  inputCanvas.height = height;
  inputCanvasCtx = inputCanvas.getContext("2d");
  video.width = width;
  video.height = height;
  video.srcObject = stream;

// And using the requestVideoFrameCallback API, whenever a frame is presented, this callback is triggered
  function onFrame(now, metadata){

     inputCanvasCtx.drawImage(video, 0, 0);;

     // Get frame from our canvas.
     frame = inputCanvasCtx.getImageData(0,0,inputCanvas.width, inputCanvas.height);

     // Other computations
  }

在对我的设置进行了这个简单的更改之后，没有更改任何其他内容，我设法在11ms内提取了帧，这是之前花费的一半时间，我不明白为什么。 我只用两行将常规画布转换为屏幕外画布。

  video = document.createElement("video");
  inputCanvas = document.createElement("canvas");
  inputCanvas.width = width;
  inputCanvas.height = height;
  offscreen = inputCanvas.transferControlToOffscreen(); // Changed line
  inputCanvasCtx = offscreen.getContext("2d"); // Changed line
  video.width = width;
  video.height = height;
  video.srcObject = stream;

我将不胜感激有关此事的任何见解。